Slider
Range input with a draggable thumb. Supports single value and two-thumb range selection. Fully keyboard accessible.
Examples
60
0100
Custom format
$250
$0$1000
Range (two thumbs)
$200 – $800
$0$1000
Sizes
40
0100
60
0100
80
0100
Controlled
60
0100
Value: 60
Props
value
number[]
Controlled value. Pass two numbers for a range slider.
defaultValue
number[]
Initial value for uncontrolled usage.
onValueChange
(value: number[]) => void
Called continuously as the thumb moves.
onValueCommit
(value: number[]) => void
Called only when the thumb is released.
min= 0
number
Minimum value.
max= 100
number
Maximum value.
step= 1
number
Step increment.
size= 'md'
'sm' | 'md' | 'lg'
Track height and thumb size.
label
string
Label rendered above the track.
showValue= false
boolean
Displays the current value next to the label.
formatValue
(value: number) => string
Custom formatter for the displayed value and min/max labels.
disabled= false
boolean
Disables interaction.
className
string
Additional classes on the wrapper.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number[] | — | Controlled value. Pass two numbers for a range slider. |
| defaultValue | number[] | — | Initial value for uncontrolled usage. |
| onValueChange | (value: number[]) => void | — | Called continuously as the thumb moves. |
| onValueCommit | (value: number[]) => void | — | Called only when the thumb is released. |
| min | number | 0 | Minimum value. |
| max | number | 100 | Maximum value. |
| step | number | 1 | Step increment. |
| size | 'sm' | 'md' | 'lg' | 'md' | Track height and thumb size. |
| label | string | — | Label rendered above the track. |
| showValue | boolean | false | Displays the current value next to the label. |
| formatValue | (value: number) => string | — | Custom formatter for the displayed value and min/max labels. |
| disabled | boolean | false | Disables interaction. |
| className | string | — | Additional classes on the wrapper. |