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 sliders

Continuous sliders allow users to select a value along a subjective range. They do not require a specific value to make adjustments, although they may, in some instances, offer an editable numeric value.

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.

Example of a slider with an editable numeric value

Example of a slider with an editable numeric value in normal, hover, focus, click, and disabled states.

Discrete slider
Expand and collapse contentAn arrow that points down when collapsed and points up when expanded.

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.

With a numeric value label

Use for settings for which users need to know the exact value of the setting.