Forms & Controls
Accessible Slider
A control for selecting a value from a continuous or discrete range.
Last verified against WCAG 2.2 and WAI-ARIA APG 1.2 on 2026-07-02.
Implementation
<span id="volume-label">Volume</span>
<!-- Prefer native <input type="range">, it gives the slider role, the
full keyboard model, and pointer dragging for free. Use this custom
version only when you need styling the native control can't do.
aria-valuenow/min/max carry the value; aria-valuetext gives a
human-friendly reading ("60%"). -->
<div class="track" id="volume-track">
<div
class="thumb"
id="volume-thumb"
role="slider"
tabindex="0"
aria-labelledby="volume-label"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="60"
aria-valuetext="60%"
></div>
</div>Required roles, states & properties
| Element | Attribute | Why |
|---|---|---|
| Thumb | role="slider" | Identifies the focusable thumb element as a slider control to AT. |
| Thumb | aria-valuemin / aria-valuemax | Communicates the slider's minimum and maximum possible values. |
| Thumb | aria-valuenow | Communicates the current numeric value, updated on every change. |
| Thumb | aria-valuetext | Overrides the announced value with a human-meaningful string when the raw number alone isn't meaningful (e.g. "Medium" instead of "2"); here it's used to announce "60%" instead of a bare "60." |
| Thumb | aria-labelledby / aria-label | Gives the slider an accessible name, e.g. "Volume," so it isn't announced as an unnamed slider. |
| Thumb | tabIndex={0} | Makes the thumb keyboard-focusable, since a bare <div> is not focusable by default. |
Keyboard interaction model
| Key | Behavior |
|---|---|
| Right Arrow / Up Arrow | Increases the value by one step. |
| Left Arrow / Down Arrow | Decreases the value by one step. |
| Home | Jumps to the minimum value. |
| End | Jumps to the maximum value. |
| Page Up | Increases the value by a larger step (10x the normal step, for sliders with a wide range). |
| Page Down | Decreases the value by a larger step. |
Focus management rules
- The thumb itself is the single Tab stop for the whole control, there's nothing else to tab through.
- Clicking anywhere on the track moves focus to the thumb and jumps the value to that position.
- Focus never leaves the thumb while dragging or using arrow keys; the value updates in place.
- A visible focus ring on the thumb must remain visible at every value, including at the min/max ends of the track.
WCAG 2.2 success criteria mapping
| SC | Name | Level | Why it applies |
|---|---|---|---|
| 2.1.1 | Keyboard | A | All functionality is operable through a keyboard interface with no specific timing. |
| 2.5.7 | Dragging Movements | AA | Functionality using a dragging movement has a single-pointer alternative (e.g. slider with buttons). |
| 4.1.2 | Name, Role, Value | A | For all UI components, name, role, and value are programmatically determinable; states and changes are announced. |