// src/components/RadixSlider.jsx
import * as Slider from "@radix-ui/react-slider";
import { useState } from "react";

const RadixSlider = () => {
  const [values, setValues] = useState([20, 80]);
  console.log(values);
  return (
    <div className="bg-gray-200 ">
      <label
        htmlFor="slider"
        className="text-center text-sm font-medium text-gray-700"
      >
        range: {values.toString()}
      </label>
      <Slider.Root
        id="slider"
        className="outline outline-1 mx-auto relative flex items-center select-none touch-none w-[300px] h-5"
        defaultValue={values}
        // onValueChange={(values) => setValues(values)}
        onValueCommit={(values) => setValues(values)}
        max={100}
        step={1}
        minStepsBetweenThumbs={10}
      >
        <Slider.Track className="bg-blue-400 relative grow rounded-full h-[3px]">
          <Slider.Range className="absolute bg-red-400 rounded-full h-full" />
        </Slider.Track>
        <Slider.Thumb
          className="block bg-white shadow-[0_2px_10px] shadow-black rounded-full hover:bg-violet-300 focus:outline "
          aria-label="Volume"
          asChild
        >
          <p className=" px-1"> {values[0]}</p>
        </Slider.Thumb>
        <Slider.Thumb
          className="block   bg-white shadow-[0_2px_10px] shadow-black rounded-full hover:bg-violet-300 focus:outline "
          aria-label="Volume"
          asChild
        >
          <p className=" px-1"> {values[1]}</p>
        </Slider.Thumb>
      </Slider.Root>
    </div>
  );
};

export default RadixSlider;

// src/App.jsx
const App = () => (
  <div>

      <RadixSlider />
     
    </div>
  </div>
);