Sliders lets users select a value from a continuous or discrete range of values by moving the slider thumb. The smallest value is to the left, the largest to the right. Sliders can have icons to the left and right of the bar that reflect the value intensity. The interactive nature of the slider makes it a great choice for settings that reflect intensity levels, such as volume, brightness, or color saturation.
Use continuous sliders for subjective settings that do not require a specific value for the user to make meaningful adjustments.
Light Theme
Dark theme
Spacing for icons to the left and/or right of the bar
Use for settings for which users need to set the exact value. Upon pressing the thumb, the text box becomes editable.
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. Each tick mark should change the setting to a level that’s discernible to the user. The values are predetermined and aren’t user-editable.
Use for settings for which users need to know the exact value of the setting.
Light theme
Dark theme