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
Prop | Type | Default |
---|---|---|
$$typeof | symbol | - |
displayName? | string | - |
propTypes? | any | - |