Components Sliders

Sliders

Sliders let 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.

Continuous slider Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Use continuous sliders for subjective settings that do not require a specific value for the user to make meaningful adjustments.

Light

Thumb on: Swatch 500, Opacity  100%
Track on: Swatch 500, Opacity  100%

Thumb off: #000000, Opacity  26%
Track off: #000000, Opacity  26%

Disabled (disconnected): #000000, Opacity  26%

Light theme

Dark

Thumb on: Swatch 200, Opacity  100%
Track on: Swatch 200, Opacity  100%

Thumb off: #FFFFFF, Opacity  30%
Track off: #FFFFFF, Opacity  30%

Disabled (disconnected): #FFFFFF, Opacity  30%

Dark theme

Various slider behaviors

Spacing for icons to the left and/or right of the bar:

Example of spacing for icons in a slider.

Examples of sliders in normal, hover, focus, click, and disabled states.

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 content An 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.

Light theme

Dark theme

Animation of discrete slider