1.6 KiB
1.6 KiB
- Home
- Components
- Slider
Slider
An input where the user selects a value from within a given range.
DocsAPI Reference## 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 | - | 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/>