Please note that the contents of this offline web site may be out of date. To access the most recent documentation visit the online version .
Note that links that point to online resources are green in color and will open in a new window.
We would love it if you could give us feedback about this material by filling this form (You have to be online to fill it)
Components Sliders
This document is a preview.

Sliders

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.

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 Theme
Dark theme

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

With editable numeric value

Use for settings for which users need to set the exact value. Upon pressing the thumb, the text box becomes editable.

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 numeric value label

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

Light theme
Dark theme