Slider

A Slider allows users to choose from a range of continuous and discrete values. The Slider displays the range of possible values and the Slider’s indicator displays the current value.

To achieve the split color element in the slider a small amount of JavaScript is needed. Refer to slider documentation in the Git repository for more information

Rules of Thumb

Use a slider:

  • When users need to set defined, contiguous values (like volume or brightness), or a range of discrete values (like screen resolution).
  • To display abstracted values like “Low, Medium,” or “High.”
  • To reflect discrete numeric values by adding labels.
  • To give users immediate feedback on selection such as screen contrast.

Sliders may be used in conjunction with an input field allowing the user to set a slider value via keyboard entry

Examples

Do: If adding labels, only use the minimal amount necessary to indicate the values.
Do: If adding labels, only use the minimal amount necessary to indicate the values.
Don’t: Excessive labels clutter the design.
Don’t: Excessive labels clutter the design.