Slider
An input where the user selects a value from within a given range.
Features
- Can be controlled or uncontrolled.
- Supports multiple thumbs.
- Supports a minimum value between thumbs.
- Supports touch or click on track to update value.
- Supports Right to Left direction.
- Full keyboard navigation.
Install
Import
API
Root
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | div |
asChild | boolean | false |
defaultValue | number[] | () => [0] |
dir | Direction | ltr |
disabled | boolean | false |
inverted | boolean | false |
max | number | 100 |
min | number | 0 |
minStepsBetweenThumbs | number | 0 |
modelValue | number[] | undefined |
name | string | - |
orientation | DataOrientation | horizontal |
step | number | 1 |
| Slot (default) | Type |
|---|---|
modelValue | number[] |
| Data attribute | Value |
|---|---|
[data-orientation] | 'vertical' | 'horizontal' |
[data-disabled] | Present when disabled |
Track
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | span |
asChild | boolean | false |
| Data attribute | Value |
|---|---|
[data-orientation] | 'vertical' | 'horizontal' |
[data-disabled] | Present when disabled |
Range
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | span |
asChild | boolean | false |
| Data attribute | Value |
|---|---|
[data-orientation] | 'vertical' | 'horizontal' |
[data-disabled] | Present when disabled |
Thumb
| Props | Type | Default |
|---|---|---|
as | AsTag | Component | div |
asChild | boolean | false |
| Data attribute | Value |
|---|---|
[data-orientation] | 'vertical' | 'horizontal' |
[data-disabled] | Present when disabled |