UX Patterns Guide

Application · lesson 13 of 20 · Selection And Choice

Range slider

Underlying principle: Choice controls express how many options are available, how many may be selected, and when the selection takes effect. The control should reveal the meaning and consequence of each choice.

Use two separately named thumbs on one bounded scale, keep the endpoints ordered, show the selected range and unit, synchronize exact endpoint fields when precision matters, and explain empty, crossed, disabled, or repaired states.

Start with the decision

Does this fit your task?

Users need a lower and upper bound on one numeric scale.

Review the boundary: Compare the task with the alternatives in the decision section.

Review the decision →
Try the live example →Compare alternatives →
Study the interaction

Follow the task before choosing the component

Choice controls express how many options are available, how many may be selected, and when the selection takes effect. The control should reveal the meaning and consequence of each choice.

01 / Recognize the need

What the person is doing

The task is one numeric or relative scale with a lower and upper boundary.

02 / Design the response

What the interface must communicate

Use two separately named thumbs on one bounded scale, keep the endpoints ordered, show the selected range and unit, synchronize exact endpoint fields when precision matters, and explain empty, crossed, disabled, or repaired states.

Initial state with visible label, min, max, unit, current lower endpoint, and current upper endpoint.

03 / Judge the outcome

What to look for

Are users setting two boundaries on one numeric scale?

Each thumb controls one endpoint in a related value pair.

Practice this pattern: Sketch range slider for this situation: Users need a lower and upper bound on one numeric scale. Include this state: Initial state with visible label, min, max, unit, current lower endpoint, and current upper endpoint. Review your sketch with this question: Are users setting two boundaries on one numeric scale?

Study the Selection And Choice family →Read the underlying principle →
Decision first

Choose this pattern when the problem matches

Use when

  • Users need a lower and upper bound on one numeric scale.
  • Relative filtering or quick coarse adjustment matters.
  • Endpoint values can remain visible and synchronized with the handles.
  • The product can prevent crossing and communicate result impact.

Avoid when

  • Users choose only one value.
  • The endpoints are dates or calendar availability.
  • The range is binary, tiny, categorical, destructive, legal, or high-stakes.

Problem it prevents

The task is one numeric or relative scale with a lower and upper boundary.

Test the behavior

Try strong and weak versions of the interaction

Open the working example, try its controls, and compare the behavior against the decision guidance.

In the lab you can
  • switch between strong UI, weak UI, strong UX, and weak UX;
  • trigger required, empty, loading, error, and recovery states;
  • inspect keyboard and accessibility expectations beside the demo.
Launch Range slider in the lab
Pattern anatomy

What a strong implementation has to make clear

User need

The task is one numeric or relative scale with a lower and upper boundary.

Pattern promise

Use two separately named thumbs on one bounded scale, keep the endpoints ordered, show the selected range and unit, synchronize exact endpoint fields when precision matters, and explain empty, crossed, disabled, or repaired states.

Required state

Initial state with visible label, min, max, unit, current lower endpoint, and current upper endpoint.

Failure to inspect

Only one endpoint is stored despite two values being shown.

Access contract

Expose each thumb as a separate slider with a clear endpoint name such as Minimum price and Maximum price.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • A nightly price range slider shows Minimum $120 and Maximum $280, a selected band between the thumbs, $0 and $500 endpoints, and paired endpoint fields.
  • A departure-time filter keeps lower and upper handles separately focusable and displays the resulting time range.
  • A user raises the minimum price, lowers the maximum price, sees the result count narrow, then widens the range after a few-results warning.
  • A user types exact endpoints and both handles move while the submitted minimum and maximum remain ordered.
Weak implementation

Vague, hidden, hard to recover from

  • A filter labelled Budget has one thumb and stores only a minimum price.
  • A user drags the lower handle beyond the upper handle and the filter submits an impossible range.
  • Only one endpoint is stored despite two values being shown.
  • The lower endpoint can exceed the upper endpoint.
UI guidance
  • Render two endpoint thumbs on one track with a persistent label, selected range band, visible minimum and maximum endpoint values, unit, min and max labels, focus states, and disabled or read-only states.
  • Provide separate accessible names, values, and constraints for lower and upper thumbs; pair with endpoint number fields when exact review or typing matters.
UX guidance
  • Help users quickly narrow one numeric scale by setting both lower and upper limits while seeing the resulting active range.
  • Prevent impossible endpoint order, show result impact, and choose date pickers or typed endpoint fields when range-slider interaction would hide important semantics.
Implementation contract

What the implementation must handle

States

  • Initial state with visible label, min, max, unit, current lower endpoint, and current upper endpoint.
  • Lower thumb focused state.
  • Upper thumb focused state.
  • Dragging or actively adjusting either endpoint.

Interaction

  • Each thumb controls one endpoint in a related value pair.
  • The lower endpoint remains less than or equal to the upper endpoint, with any required minimum gap enforced.
  • The visual selected band, text summary, number inputs, and submitted payload stay synchronized.
  • Both thumbs remain in a stable tab order regardless of visual proximity.

Accessibility

  • Expose each thumb as a separate slider with a clear endpoint name such as Minimum price and Maximum price.
  • Expose current value, minimum, maximum, and human-readable value text for each thumb.
  • Keep thumb tab order stable regardless of visual position.
  • Update dependent aria-valuemin and aria-valuemax when the opposite endpoint changes.

Review

  • Are users setting two boundaries on one numeric scale?
  • Can the product define meaningful min, max, step, unit, and endpoint gap?
  • Do users need exact values, and if so are endpoint fields provided?
  • What happens if a user types a minimum above the maximum?
Evidence trail

Source-backed claims behind this guidance

WAI-ARIA APG Slider Multi-Thumb Pattern

W3C Web Accessibility Initiative - checked

APG multi-thumb guidance defines related values, min/max price examples, non-crossing constraints, stable tab order, per-thumb roles and values, dependent aria min/max updates, and touch assistive technology cautions.

Carbon Design System Slider

IBM Carbon Design System - checked

Carbon range slider guidance defines minimum and maximum number inputs, two handles, track, min/max labels, exact input, click and drag behavior, and date-picker avoidance for date ranges.

Material Web Slider

Google Material Web - checked

Material Web slider guidance documents range mode with value-start and value-end, start and end aria labels, aria value text, value labels, steps, ticks, and disabled state.

U.S. Web Design System Range slider

U.S. Web Design System - checked

USWDS range slider guidance supports approximate or relative range selection, precise text-input alternatives, draggable behavior, min/max labels, step granularity, and screen reader units.

Visa Product Design System Slider

Visa Product Design System - checked

Visa slider guidance documents dual-point sliders for upper and lower boundaries, common filtering use, min/max values, units, and calendar alternatives for dates.

Full agent/debug reference

Problem Context

  • The task is one numeric or relative scale with a lower and upper boundary.
  • Users understand the scale as price, distance, duration, rating, speed, size, or another ordered numeric quantity.
  • The interface can define min, max, step, unit, endpoint gap, and active range feedback.
  • Filtering or previewing results benefits from quick coarse adjustment and visible endpoint review.
  • The task is not selecting calendar dates, named categories, or a single value.

Selection Rules

  • Choose a range slider when users need both a minimum and maximum value on one known numeric scale.
  • Use single slider when only one value is adjusted.
  • Use paired text or number inputs when exact arbitrary endpoints, pasted values, currency precision, or very large ranges matter more than quick adjustment.
  • Use date range picker when endpoints are dates or depend on calendar availability.
  • Use filter panel when the range is one of several filters that need grouped apply, reset, saved, or mobile disclosure behavior.
  • Keep both endpoints visible and programmatically named.
  • Prevent the lower endpoint from passing the upper endpoint, or repair crossed input with explicit feedback.
  • Avoid tiny ranges, binary choices, named categories, destructive actions, hidden filters, and scales whose units users cannot interpret.

Required States

  • Initial state with visible label, min, max, unit, current lower endpoint, and current upper endpoint.
  • Lower thumb focused state.
  • Upper thumb focused state.
  • Dragging or actively adjusting either endpoint.
  • Keyboard increment state for each thumb.
  • Exact endpoint typed state.
  • Crossed endpoint prevention or repair state.
  • Few or zero results state caused by a narrow range.
  • Disabled dependency state.
  • Read-only range review state.
  • Mobile screen-reader interaction checked on both lower and upper thumbs before release.

Interaction Contract

  • Each thumb controls one endpoint in a related value pair.
  • The lower endpoint remains less than or equal to the upper endpoint, with any required minimum gap enforced.
  • The visual selected band, text summary, number inputs, and submitted payload stay synchronized.
  • Both thumbs remain in a stable tab order regardless of visual proximity.
  • Changing one thumb updates the allowed aria minimum or maximum of the other when endpoints depend on each other.
  • Warnings, no-results states, disabled state, and repaired crossings are announced without clearing the current range.

Implementation Checklist

  • Define min, max, step, unit, default lower endpoint, default upper endpoint, and minimum gap.
  • Use an accessible multi-thumb implementation or pair native range inputs with clear labels and synchronized constraints.
  • Provide visible endpoint values and paired number inputs when users need exact review.
  • Update aria-valuemin and aria-valuemax on dependent thumbs as the opposite endpoint changes.
  • Keep tab order lower endpoint then upper endpoint even when thumbs are close.
  • Show result count, empty-result warning, reset or widen action, and applied filter summary when the range filters content.
  • Test pointer drag, keyboard, touch, screen readers, high zoom, forced colors, RTL, mobile, and backend endpoint validation.

Common Generated-UI Mistakes

  • Using only one thumb for a task that needs two boundaries.
  • Allowing endpoints to cross without repair or explanation.
  • Hiding the exact minimum and maximum values.
  • Using a range slider for dates instead of a calendar-aware date range picker.
  • Using a range slider for three named choices or binary state.
  • Filtering results instantly without showing the active range or a way to widen it.
  • Changing tab order when the visual order of thumbs changes.
  • Using an extremely large or highly precise range that users cannot control with the rail.

Critique Questions

  • Are users setting two boundaries on one numeric scale?
  • Can the product define meaningful min, max, step, unit, and endpoint gap?
  • Do users need exact values, and if so are endpoint fields provided?
  • What happens if a user types a minimum above the maximum?
  • Will a narrow range produce few or zero results, and is recovery visible?
  • Would a date range picker, paired number fields, filter panel, select, or single slider be clearer?
Accessibility
  • Expose each thumb as a separate slider with a clear endpoint name such as Minimum price and Maximum price.
  • Expose current value, minimum, maximum, and human-readable value text for each thumb.
  • Keep thumb tab order stable regardless of visual position.
  • Update dependent aria-valuemin and aria-valuemax when the opposite endpoint changes.
  • Do not rely on the selected band alone; show endpoint text and unit.
  • Test touch assistive technologies before shipping custom multi-thumb sliders.
Keyboard Behavior
  • Tab reaches the lower endpoint thumb, then the upper endpoint thumb in stable order.
  • Arrow keys adjust the focused endpoint by one step.
  • Home and End move the focused endpoint to its allowed limit, respecting the other endpoint.
  • Page Up and Page Down may adjust the focused endpoint by a larger step.
  • Tab moves from the thumbs to exact endpoint fields or the next control without losing the selected range.
  • Typed endpoint errors return focus to the affected endpoint field or thumb without clearing the other endpoint.
Variants
  • Price range slider
  • Distance range slider
  • Duration range slider
  • Rating range slider
  • Dual-thumb filter slider
  • Range slider with endpoint inputs
  • Range slider with result count
  • Disabled range slider
  • Read-only range slider

Verification

Source trail checked:

Saved items