Role and semantics
Section titled “Role and semantics”Each thumb holds an input type="range"; its role is slider and it is named by the label. In a range the names are “Range, lower value” and “Range, upper value”. The value is read from aria-valuenow and the formatted text from aria-valuetext. The description is linked with aria-describedby. The bubble and marks have aria-hidden; the visible value is an output element.
Keyboard
Section titled “Keyboard”| Key | Behaviour |
|---|---|
| Tab | To the thumb; in a range, to the second thumb. |
| Left and right, up and down arrow | One step. |
| Shift + arrow, Page Up, Page Down | By largeStep. |
| Home, End | Lowest or highest value. |
Keyboard focus shows a 2 px color-focus-ring ring and the value bubble on the thumb.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
| Single value | “Level, slider, 40” |
| Percent | “Level, slider, 25%” |
| Range | “Range, lower value, slider, 20” |
Contrast
Section titled “Contrast”The filled track and the thumb border have 3:1 against the background. The value text has 4.5:1.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How Slider meets it | What product teams must do |
|---|---|---|
| 1.3.1 Info and relationships | A native, named range input. | — |
| 2.1.1 Keyboard | Arrow, page and Home/End keys. | — |
| 2.5.7 Dragging movements | Clicking the track picks a value; dragging is not required. | — |
| 2.5.8 Target size (minimum) | A 40 px touch area. | — |