Slider
An input where the user selects a value from within a given range.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
showStep | boolean | false | Visualize step marks along the track |
min | number | 0 | Minimum value |
max | number | 100 | Maximum value |
step | number | 1 | Step size |
value | number[] | - | Controlled values for one or more thumbs |
defaultValue | number[] | - | Uncontrolled initial values |
onValueChange | (value: number[]) => void | - | Callback when value changes |
| ...Radix props | ComponentProps<typeof SliderPrimitive.Root> | - | All Radix slider props |
Usage
<Slider defaultValue={[50]} max={100} step={0.01}/>
Create a range
<Slider defaultValue={[25, 75]} max={100} step={1}/>
Prevent thumb overlap
<Slider defaultValue={[20, 70]} max={100} step={10} minStepsBetweenThumbs={1}/>
Define step size
<Slider defaultValue={[20]} max={100} step={10}/>
Define step size and show
<Slider defaultValue={[20]} min={2} max={100} step={10} showStep/>
<Slider showStep/>
Examples
// Single value
<Slider defaultValue={[50]} min={0} max={100} step={1} />
// Range
<Slider defaultValue={[25, 75]} min={0} max={100} step={1} />
Disabled
<Slider defaultValue={[20]} max={100} step={10} disabled/>
Disabled with step
<Slider defaultValue={[20]} max={100} step={10} showStep disabled/>