Skip to content
UX Atlas
Plate CMP·008 · ComponentGrid F2 · Rev. 2026-08-14

Slider

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

ComponentCraft conventionIntermediate

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 plate
  1. 1Definition
  2. 2Requirements
  3. 3When a slider is the right control
  4. 4In practice
  5. 5Local chart
  6. 6Continue from here

Reach for this when

  • Approximate values within a bounded range.
  • Immediate visual feedback matters, as in filters.

Common mistakes

  • Sliders used for values that need precision.
  • Thumbs too small for touch.
  • No keyboard support.

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.

When a slider is the right control

Do

  • Use it where the reader cares about approximate magnitude rather than an exact number.
  • Show the current value, and let it be typed where precision matters.
  • Support arrow keys, Home, End and page keys, with a sensible step.
  • Make the thumb large enough to hit, and the track large enough to tap.

Do not

  • Use a slider for a value with a wide range and a precise answer, such as a price the reader has in mind.
  • Place a horizontal slider where a horizontal swipe also scrolls the page.
  • Hide the value until after the drag ends.
  • Use a two-handle range slider as the only way to enter a range.

In practice

  1. i.

    The price filter nobody could set

    Precision against range

    A slider covering zero to ten thousand made every value between two and three hundred a one-pixel target. A pair of number inputs, with the slider as a coarse companion, served both kinds of reader.

  2. ii.

    Sliding against the page

    Touch conflicts

    A horizontal slider inside a vertically scrolling page competes with the swipe gesture on narrow screens, so drags are lost and the page jumps. Larger touch targets and a typed alternative are what make it usable.

Local chart

CMP·008 · Region III · Grid F2

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Fitts's LawLAW·002 · PRINCIPLES BEHIND THISNatural MappingPRIN·008 · PRINCIPLES BEHIND THISKeyboard NavigationA11Y·002 · DEPENDS ONTarget SizeA11Y·011 · DEPENDS ONText InputCMP·003 · OFTEN USED WITHFilteringPAT·004 · OFTEN USED WITH

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.