Skip to main content

Sliders

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

Sliders Example

Overview

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.

Usage

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.

Types

Continuous Sliders

Continuous sliders allow users to make selections along a subjective range thus don’t require a specific value.

Sliders Continuous With No Labels

Discrete Sliders

Discrete sliders display a numeric value label upon dragging the handle, or allow users to input an exact value. Tick marks are also often used with discrete slides but are optional.

Sliders Discrete with Tooltip showing

Sliders with Steps

Sliders with steps

Last updated January 30, 2024.