use UI

Range Slider

Also called dual slider, price filter, range input, double thumb slider

A track with two handles selecting the lower and upper bound of a continuous range.

Example

Price per night

£80 – £300

8 of 14 places between £80 and £300

Drag to feel the range; type to state it. The fields are not a convenience bolted on the side — they are the only way to reach an exact number, and on a phone they are the only reliable way to reach any number at all.

When to use it

  • The exact number matters less than the feel of it — “roughly mid-range”, “anything under a couple of hundred”.
  • The bounds are known and small enough to be crossed in a few drags.
  • Immediate feedback is available: results update as the handles move, so the value is judged by its effect.

When not to

  • A precise value is required. Nobody drags to exactly 1,847 — that is a number field.
  • The range spans orders of magnitude. A linear track from 0 to 1,000,000 makes everything under 50,000 unreachable.
  • It is the only way to enter the value. On a phone, a 4px track between two handles is a coin toss.

Trade-offs

  • Shows the whole range and the current selection in one glance, including how much is excluded.
  • Continuous feedback makes exploring cheap — drag, look, adjust.
  • One control expresses both bounds and the relationship between them.
  • Precision is poor and gets worse as the range widens; one pixel can be several units.
  • Two handles can meet, cross or hide each other, and every implementation has to decide what happens then.
  • Touch targets are small by nature, and the handles sit exactly where a finger obscures the value.

Accessibility

What this pattern needs in order to work for everyone.

Keyboard
  • Each handle is focusable and takes its own tab stop. Arrow keys step by one, PageUp and PageDown by a larger jump, Home and End go to the bounds.
  • Do not let handles pass each other silently. Either clamp them or swap them and say so, but pick one and be consistent.
  • The number fields beside the slider are not a nicety — they are the keyboard path for anyone who needs an exact value.
Roles and state
  • Each handle is a slider in the accessibility tree with a current value and bounds. A native `<input type="range">` per handle gives you all of that plus the whole key model for free, which is why the good implementations are built on one.
  • Handles must not pass each other. Whether their reported bounds narrow to the other handle's position varies between implementations; preventing the crossing is the part that is not optional.
  • Every handle needs its own name. Two sliders both called “Price” are indistinguishable — use “Minimum price” and “Maximum price”.
  • Use `aria-valuetext` when the raw number is not the meaning: “£120”, not “120”.
  • The visible output must update as the handles move; a value that only appears on release leaves low-vision users dragging blind.
Focus
Focus stays on the handle being dragged. If the handles swap places, focus follows the value the user was holding, not the position.

In the wild

  • Airbnb price filter — Slider over a histogram, with editable minimum and maximum fields underneath.
  • Amazon price filter — Slider plus two number inputs and a Go button — the fields are the exact path.