Components - Sliders¶
- Sliders let users select from a range of values by moving the slider thumb.
- Sliders are ideal components for adjusting settings that reflect intensity levels, such as volume, brightness, or color saturation.
- Sliders may have icons on both ends of the bar that reflect the value intensity.
- Place the smallest value for the slider range on the left and the largest value on the right.
Continuous slider¶
Use continuous sliders for subjective settings that do not require a specific value for the user to make meaningful adjustments.
Continuous slider With an editable numeric value¶
Use for settings for which users need to set the exact value. Upon pressing the thumb, the text box becomes editable for text entry and updates the value automatically with thumb movement.
Discrete slider¶
- The discrete slider thumb snaps to evenly spaced tick marks along the slider rail.
- Use for objective settings that require specific values for the user to make meaningful adjustments
- The values are predetermined and aren’t user-editable.
Discrete slider With a numeric value label¶
Use for settings for which users need to know the exact value of the setting.