Slider

import { Slider } from "@/ui/Slider";

<Slider.Root
  label="Volume"
  value={volume}
  min={0}
  max={100}
  step={1}
  onValueChange={setVolume}
/>

function SliderRoot({ value, onChange }: { value: number; onChange: (value: number) => void }) {
  return <input type="range" value={value} onChange={(e) => onChange(Number(e.target.value))} className="h-2 w-full accent-primary" />;
}

type SliderCompound = typeof SliderRoot & { Root: typeof SliderRoot };
export const Slider = Object.assign(SliderRoot, { Root: SliderRoot }) as SliderCompound;