Slider
An input that allows users to select a value from a range.
When To Use
Use the Slider component when you need to:
- Allow users to select a value or range from a continuous set of values
- Provide control for adjusting settings that have a minimum and maximum value
- Create interfaces for audio volume, brightness, or opacity controls
- Allow users to set a range within defined boundaries
- Create visual controls for numeric inputs with a finite range
Sliders are useful when the precise value is not as important as the relative position within the allowed range.
Examples
Value: 50
Range: 25 - 75
Step Size: 5
Value: 25
Step Size: 10
0
10
20
30
40
50
60
70
80
90
100
Step Size: 20 (min: 20, max: 80)
20
40
60
80
50%
75%
ColdCoolNormalWarmHot
Props
Slider
| Prop | Type | Default |
|---|---|---|
onValueCommit? | ((value: number[]) => void) | - |
onValueChange? | ((value: number[]) => void) | - |
value? | number[] | - |
minStepsBetweenThumbs? | number | - |
step? | number | - |
orientation? | "horizontal" | "vertical" | - |
disabled? | boolean | - |
name? | string | - |
asChild? | boolean | - |
key? | Key | null | - |
form? | string | - |
inverted? | boolean | - |
max? | number | - |
min? | number | - |
SliderRange
| Prop | Type | Default |
|---|---|---|
asChild? | boolean | - |
key? | Key | null | - |
SliderTrack
| Prop | Type | Default |
|---|---|---|
asChild? | boolean | - |
key? | Key | null | - |
SliderThumb
| Prop | Type | Default |
|---|---|---|
name? | string | - |
asChild? | boolean | - |
key? | Key | null | - |