Slider
How the Slider works with a keyboard and assistive tech, and where it stands against WCAG 2.2 AA.
Each thumb is role="slider" with its minimum, maximum and current value, so it is set from the keyboard with the standard slider keys. Dragging is never the only way: a press on the track moves the nearer thumb there, and the arrow keys step it.
Keyboard#
Moves focus to the thumb. In a range, to the lower thumb, then the upper.
Increases the value by one step. ↑ does the same.
Decreases the value by one step. ↓ does the same.
Increases the value by a tenth of the range. Page Down decreases it.
Sets the minimum. In a range, the upper thumb stops at the lower one.
Sets the maximum. In a range, the lower thumb stops at the upper one.
Semantics#
role="slider"Focusable, with the value read as it changes.
Each thumbaria-valuemin, aria-valuemax, aria-valuenowThe range and the current value.
Each thumbaria-valuetextThe value as it is shown: 40%, $120, 2.5×. Pass formatValue so units are read.
Each thumbaria-labelledbyPoints at the visible label. Without a label, pass aria-label.
labelrole="group"Holds both thumbs under the label. Give each thumb its own name: Minimum price, Maximum price.
Rangearia-disabledThe thumb leaves the tab order and ignores keys and pointer.
disabledaria-hidden="true"The visible amount and tooltip repeat aria-valuetext, so they are hidden to avoid reading it twice.
Amount, tooltipColour contrast#
Every variant and state has to meet WCAG 2.2 Level AA. Measure the colours as they land on screen: a translucent hover or press wash over whatever sits behind it.
Fill against the track · Moved
The #005cf8 fill against the #f2f2f2 track, 4.83:1, and against the page. It is what shows the value.
WCAG 1.4.11 Non-text Contrast ↗Track and thumb · All
The #f2f2f2 track is 1.12:1 on white, and the white thumb is found only by its shadow. Neither reaches 3:1; at the start, with the centre grey, nothing does.
WCAG 1.4.11 Non-text Contrast ↗Header text · Label, amount
The label in #2a2a2a and the amount in #6d6d6d pass. (Optional) is #8f8f8f, 3.23:1, and fails.
WCAG 1.4.3 Contrast (Minimum) ↗Focus indicator · Focus visible
A 2px ring in #1a6ef8 off a white gap, on keyboard focus only. It measures 4.54:1 on white, so it clears 3:1 on every light surface the library uses.
WCAG 1.4.11 Non-text Contrast ↗WCAG 2.4.13 Focus Appearance ↗Disabled · Disabled
The whole slider fades to 40% and is exempt as inactive.
WCAG 1.4.3 Contrast (Minimum) ↗Measured contrast#
Each part against what sits behind it on a white page, before and after the value leaves the start, from the ds.css tokens; text is held to 4.5:1 and the track, fill and thumb, as graphics, to 3:1. 6 of 14 pairs fall below their minimum (4.5:1 for text, 3:1 for graphics) and are marked in amber.
Motion#
- The thumb and fill follow the pointer or key with no transition, so there is nothing to reduce.
- The tooltip appears and disappears without animating.
Checklist#
Give every slider a visible label, and every thumb in a range its own name.
Pass formatValue so aria-valuetext carries units; a bare 40 means little.
Dragging is not required: a press on the track and the arrow keys both set the value (WCAG 2.5.7).
Pair a slider with an Input when the exact number matters.
In a range, each thumb reports the full scale as its minimum and maximum, though it stops at the other thumb. The pattern suggests the other thumb's value instead.
The track (#f2f2f2, 1.12:1) and the white thumb fall under 3:1, and at the start the slider shows no value at all. It needs a darker track or an edge on the thumb before the code library ships.
The thumb is 16px but its hit area is 24px, and the track's band is 24px tall, which meets WCAG 2.5.8.