Loading...
Loading...
> A range slider component for selecting numeric values, built with Radix UI.
1import { Slider } from "@/components/ui/slider"
1const [value, setValue] = useState([50]);23<Slider4 value={value}5 onValueChange={setValue}6 max={100}7 step={1}8/>
1const [value, setValue] = useState([25, 75]);23<Slider4 value={value}5 onValueChange={setValue}6 max={100}7 step={1}8/>
1<Slider2 value={value}3 onValueChange={setValue}4 max={100}5 step={10}6/>
1<Slider2 value={value}3 onValueChange={setValue}4 min={-50}5 max={50}6 step={1}7/>
1<Slider value={[60]} disabled max={100} step={1} />
1<Slider2 value={value}3 onValueChange={setValue}4 max={100}5 step={1}6/>
1<div className="space-y-4">2 <div className="font-mono text-xs text-muted-foreground">3 [CONFIGURATION]:4 </div>5 <Slider value={value} onValueChange={setValue} max={100} />6</div>
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number[] | [0] | Controlled value array (single value or range) |
| defaultValue | number[] | undefined | Default value for uncontrolled usage |
| onValueChange | (value: number[]) => void | undefined | Callback fired when value changes |
| min | number | 0 | Minimum value of the slider |
| max | number | 100 | Maximum value of the slider |
| step | number | 1 | Step increment for slider movement |
| disabled | boolean | false | Disable slider interaction |
| orientation | "horizontal" | "vertical" | "horizontal" | Orientation of the slider |
| className | string | undefined | Additional CSS classes for the container |
✓ Use Slider when:
✗ Don't use when:
Best Practices: