Skip to main content


Sliders allow users to make selections from a range of values.

Sliders example


The slider is often accompanied by a label and a current value.

Sliders are useful for making general adjustments (for example, turning volume up and down). This basic slider type is most commonly used.

In circumstances where specific value entry is required, use the numeric input option. This option is typically used for sensitive, fine, or technical value adjustment, such as for valve tuning.


Use when

  • Encouraging user exploration when setting a value or range of values, especially when that value has an immediate effect on system performance.

Don’t use when

  • Gathering information in a form (e.g., age or salary). Instead, use an input box.
  • Precise amount is needed and the scale is too large to afford precise interaction with the slider.
  • Adjusting settings with any delay in providing user feedback.

sliders with Labels

What's changed
Date Version Notes Contributors
06/02/2022 1.0.1 Updated full layout. M. Johns