Animate & moving Slider based on a value using react spring

[anubus298]

hello is there a way to animate the slider moving values i tried this but only {animatedValue.MBValue.to((val) => ${(val / 1024).toFixed(2)} GB)} // used for debugging is changing ,here the full code :

"use client";

import { Slider } from "@/components/ui/slider";
import { useSpring, animated } from "@react-spring/web";
import { useState } from "react";


function SliderClient() {
  const [MBValue, setMBValue] = useState(0);

  // Animated value using react-spring
  const animatedValue = useSpring({
    MBValue,
    config: { tension: 120, friction: 14 },
  });

  return (
    <div className="w-full">
      <button
        onClick={() => setMBValue((prev) => Math.min(prev + 500, 4000))} // Increment with a limit
        className="p-2 bg-blue-500 text-white rounded"
      >
        Increment
      </button>
      <button
        onClick={() => setMBValue((prev) => Math.max(prev - 500, 0))} // Decrement with a limit
        className="p-2 bg-red-500 text-white rounded ml-2"
      >
        Decrement
      </button>

      <div className="mt-4">
        <animated.div>

          {animatedValue.MBValue.to((val) => `${(val / 1024).toFixed(2)} GB`)} // used for debugging
        </animated.div>
        <Slider
        
          value={[MBValue / 1024]} // this should be changing in the ui
          max={4} // Maximum is 4 GB
          step={0.1} // Adjust step for finer control
          className="w-[50%]"
        />
      </div>
    </div>
  );
}

export default SliderClient;