Skip to main content


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


Sliders select a numeric value or range of values by moving a handle or set of handles along a bar. They are ideal for adjusting settings such as volume and brightness. The slider in its basic form should be accompanied by a label and a number input that doubles as a display for the slider’s current value.


Use when

  • Encouraging user exploration when setting a value or range of values, especially when that value has an immediate effect on a data visualization.
  • A series of options is presented using a stepped slider.

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.
What's changed
Date Version Notes Contributors
11/23/2020 1.0.0 Range bar color adjusted to be accessible. E. Bohn, L. Kause, N. Springer