Slider

A slider lets people imprecisely select a value from a subjective range by moving a handle horizontally.

Also known as:
RangeRange inputRange slider

AnchorNeed to know

  • Avoid sliders when choosing a precise value is important.

Visuals

Examples

To keep in mind

Sliders are helpful for choosing subjective values.

  • Always indicate the current, selected value. Ideally with visible text associated with the handle, but at a minimum provide a text alternative for screen readers.
  • Provide a visible label describing what the slider changes, such as "Brightness".
  • Show the minimum value on the left and maximum value on the right, where these are reversed in Right-To-Left (RTL) languages.
  • We generally use sliders with no fill. You might use a fill when it's useful to give the impression of building towards the maximum value.
  • We only use horizontal sliders. We're yet to need a vertical slider.
  • We only use sliders with a single handle. We're unlikely to need a slider with more than one handle.

Style

  • Tick marks:
    • For a fine-grained range, you might consider hiding tick marks to minimize visual clutter. For example, a range of 0%–100% with 1% steps would have too many ticks and be incredibly crowded.
    • For a coarse range, where the slider may snap to widely spaced intervals, you might show a tick mark for every step so it is clear where the slider will snap to.
  • Tick labels:
    • There's rarely a need to apply labels to every tick mark. Consider only showing a label for min, max, and middle ticks, such as 0%, 100%, and maybe 50%.

Behavior

  • Use a step number to set the granularity that the slider values snap to. A good default step is 1 to stick to whole numbers.
  • Consider pairing the slider with a Text Field as an alternative input control.

Accessibility

For a custom slider:

  • Use the slider role to show that the element displays selects a value from within a given range.
  • Use the aria-valuenow, aria-valuemin, and aria-valuemax attributes to indicate progress completion.
  • Use the aria-valuetext attribute to show a text label associated with a given value.
  • Ensure a large touch target for selecting the handle.

Keyboard

  • The slider must be keyboard focusable and operable, and RTL languages reverse the direction of arrows. Usually:
    • Right and Up arrows increase the selected value
    • Left and Down arrows decrease the selected value

When to use and when not to use

When to use
  • Use a slider when an imprecise selection makes sense. For example, you might use a slider to ask someone to rate how they're feeling or adjust settings, such as brightness or volume.
  • Use a slider when changing the value has an immediate effect. If applying the setting requires pressing a confirmation button, consider using a Radio Group instead.
When not to use

See also

External Links