Slider

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

1<Slider min={0} max={100} step={10} defaultValue={50} />

1<Slider
2  min={0}
3  max={100}
4  step={25}
5  marks={[
6    { value: 0, label: "0%" },
7    { value: 25, label: "25%" },
8    { value: 50, label: "50%" },
9    { value: 75, label: "75%" },
10    { value: 100, label: "100%" },
11  ]}
12/>

1const [range, setRange] = useState([25, 75]);
2
3return (
4  <Slider
5    value={range}
6    onChange={setRange}
7    min={0}
8    max={100}
9  />
10);

1const [value, setValue] = useState(50);
2
3return (
4  <div className="space-y-2">
5    <div className="flex justify-between">
6      <Label>Volume</Label>
7      <span className="text-sm text-muted-foreground">{value}%</span>
8    </div>
9    <Slider value={value} onChange={setValue} />
10  </div>
11);