Skip to content
UX Atlas
ComponentCraft conventionIntermediate

Slider

Selecting from a continuous range, which is imprecise by nature and needs a numeric partner.

Definition

A slider lets the user select a value along a range by dragging. It is good for approximate values and poor for precise ones, which is why it usually needs an accompanying numeric input.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. Requirements
  3. Continue from here

Requirements

  • Show the current value at all times, not only while dragging.
  • Pair with a numeric input for precise entry, especially in professional tools.
  • Support arrow keys for single steps and Page Up and Page Down for larger jumps.
  • Make the thumb large enough to hit on touch, at least 44px effective target.
  • Label the minimum and maximum, and give aria-valuemin, aria-valuemax and aria-valuetext.
  • For a range with two thumbs, prevent the handles from crossing and make each independently reachable by keyboard.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Principles behind this

The reasoning this solution is an application of.

Depends on

Get these right first, or this one will not hold.

Often used with

These usually appear in the same screen or the same decision.