Accessibility
The slider follows the WAI-ARIA Slider pattern — one or more thumbs the user moves through a range of values with the keyboard or pointer — and meets WCAG 2.1 AA. An accessible slider keeps each thumb reachable and operable from the keyboard, exposes its current, minimum, and maximum values to assistive technology, and carries an accessible name — so the value it holds is clear whether the user sees it, hears it, or drives it by keyboard.
For designers
Section titled “For designers”- The thumb, track, progress fill, and value labels must maintain accessible contrast on every supported surface. Source: WCAG 1.4.3 Contrast (Minimum).
- The current value and range limits must never be conveyed by colour alone — pair the fill with the visible value read-out, labels, or the thumb’s position. Source: WCAG 1.4.1 Use of Color.
- The thumb’s focus style must stay visible, meet contrast requirements on every supported surface, and be clearly distinguishable from hover and the active (dragging) state. Source: WCAG 2.4.7 Focus Visible.
- Use semantic colour tokens (e.g.
foreground/neutral/default) rather than fixed values, so the component adapts correctly across themes and surfaces.
For developers
Section titled “For developers”Build the slider on a native <input type="range"> — it brings slider semantics and full keyboard support for free, with no extra ARIA. Fall back to a custom role="slider" only when a native input genuinely can’t be used; then you own every ARIA property and key binding yourself. A native disabled attribute takes the slider out of the tab order. A range slider is two <input type="range"> thumbs sharing one track — give each its own accessible name (e.g. Minimum and Maximum) so assistive technology tells them apart. The per-element name and value wiring is in the Labelling elements section below.
Keyboard interaction
Section titled “Keyboard interaction”| Key | Action |
|---|---|
| → / ↑ | Increase the value by one step |
| ← / ↓ | Decrease the value by one step |
| Home / End | Jump to the minimum / maximum value |
| Page Up / Page Down | Increase / decrease by a larger step |
A native <input type="range"> handles all of the above automatically; a custom role="slider" must implement each key itself.
Interactive targets must be at least 24 px so the thumb stays comfortable to acquire — larger is better for touch. Source: WCAG 2.5.8 Target Size (Minimum).
Labelling elements
Section titled “Labelling elements”Give the slider the role, name, and value semantics assistive technology needs. The anatomy below marks the two parts that carry that story — the thumb the user drives and the value labels around the track.
- Slider thumb
- Value labels
Slider thumb
A native <input type="range"> carries role="slider" implicitly, with aria-valuemin, aria-valuemax, and aria-valuenow derived from its min, max, and value. Name it with <label for>, aria-labelledby, or aria-label — the visual value labels around the track don’t name the control. Add aria-valuetext when the raw number isn’t meaningful, so assistive technology announces the formatted value (aria-valuetext="€20,000" rather than 20000). On a custom role="slider", set all of these yourself, plus aria-disabled="true" wherever the native disabled attribute would otherwise apply.
Value labels
The scale labels around the track (.tng-slider-labels) are decorative duplicates of the value. Mark them role="presentation" so they aren’t announced separately from the thumb’s value. A <datalist> wired for snap-to-step should be .sr-only — its list / id linkage still works while its inconsistent native rendering stays hidden.
Source: WCAG 4.1.2 Name, Role, Value.