• Success Criterion 2.5.7
  • Conformance level AA

Range Slider Adjustable Only by Dragging Its Handle

2.5.7 — Dragging Movements

Scenario

Setting

A streaming music app's search results

What’s wrong

Range sliders adjustable only by dragging the thumb (no click-on-track increment, no visible steppers).

Example 

<div class="year-range" id="track"><div class="thumb" onpointerdown="startDrag(event)"></div></div>
<!-- clicking the track does nothing, and there are no numeric inputs -->

Why it matters

A listener filtering search results by decade can't set a precise year range without a fine, sustained drag.

How to test

Try adjusting a range slider by clicking directly on the track or using visible stepper buttons instead of dragging the thumb: if neither works, it fails.

How to fix

Pair the visual slider with plain number inputs that update the same range, so dragging is never the only path.

<input type="number" id="yearFrom" value="1990" aria-label="From year">
<input type="number" id="yearTo" value="2020" aria-label="To year">

Outcome

A listener types 1990 and 2020 into two fields and the results filter immediately.

Who is affected

People with tremor and limited fine motor control who overshoot or undershoot a drag target.

Learn more

Related scenarios