Slider
An input component for selecting a value from a range.
Example
Usage
Slider.Composed Props
| Prop | Type | Default |
|---|---|---|
name | string | — |
disabled | boolean | — |
orientation | enum | — |
dir | enum | — |
min | number | — |
max | number | — |
step | number | — |
minStepsBetweenThumbs | number | — |
value | number[] | — |
defaultValue | number[] | — |
onValueChange | function | — |
onValueCommit | function | — |
inverted | boolean | — |
form | string | — |
className | string | — |
children | ReactNode | — |
asChild | boolean | — |
levels | SliderLevel[] | — |
ticks | SliderTick[] | — |
showTicks | boolean | — |
tickInterval | number | — |
showInput | boolean | — |
showLabels | boolean | — |
showValue | boolean | — |
showRange | boolean | — |
Slider.Root Props
| Prop | Type | Default |
|---|---|---|
name | string | — |
disabled | boolean | — |
orientation | enum | — |
dir | enum | — |
min | number | — |
max | number | — |
step | number | — |
minStepsBetweenThumbs | number | — |
value | number[] | — |
defaultValue | number[] | — |
onValueChange | function | — |
onValueCommit | function | — |
inverted | boolean | — |
form | string | — |
className | string | — |
children | ReactNode | — |
asChild | boolean | — |
Slider.Range Props
| Prop | Type | Default |
|---|---|---|
className | string | — |
children | ReactNode | — |
asChild | boolean | — |
levels | SliderLevel[] | — |
min | number | — |
max | number | — |
value | number[] | — |
Slider.Thumb Props
| Prop | Type | Default |
|---|---|---|
name | string | — |
className | string | — |
children | ReactNode | — |
asChild | boolean | — |
levels | SliderLevel[] | — |
showValue | boolean | — |
value | number | — |
Slider.Track Props
| Prop | Type | Default |
|---|---|---|
className | string | — |
children | ReactNode | — |
asChild | boolean | — |
levels | SliderLevel[] | — |
showTicks | boolean | — |
tickInterval | number | — |
ticks | SliderTick[] | — |
showRange | boolean | — |
min | number | — |
max | number | — |