Slider

Sliders are an input that allows users to make an imprecise selection from a range of values.

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.

Anatomy

The structure of the slider is horizontal and has a single handle that can be moved along a track with the mouse or by using the arrow keys. The position of the handle denotes the selected value.

Steps

Steps are selectable values along a slider range and can be visually indicated by vertical tick marks.

  • For a fine-grained range, hide tick marks to minimize visual clutter. For example, a range of 0%–100% with 1% steps.
  • For a coarse-grained range, where the slider may snap to widely spaced intervals, show a tick mark for every step so it is clear where the slider will snap to.

Labels

Where the range of values is not obvious, sliders should be labeled with minimum and maximum values. An optional center label can also be used to denote a middle value or as a description.

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

Copy guidelines

Keep descriptive labels short (1-2 words max)

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