Accessibility
For designers
Section titled “For designers”- All states (rested, disabled) must maintain accessible contrast.
- Focus styles must remain visible and meet WCAG AA contrast requirements across all supported surfaces.
- Colour tokens used should be semantic (e.g.
foreground/neutral/default) rather than fixed values to ensure the component adapts correctly to different themes or surfaces.
For developers
Section titled “For developers”Semantic markup
Section titled “Semantic markup”Use <input type="range"> whenever possible — it provides role="slider" implicitly, with built-in aria-valuemin, aria-valuemax, and aria-valuenow derived from the min, max, and value attributes.
When using the custom div-based elements (.tng-slider-thumb, .tng-slider-track) for visual purposes, an underlying <input type="range"> should still drive the semantics. If a native input cannot be used, apply role="slider" manually together with the required ARIA properties.
Labels
Section titled “Labels”Associate a visible label with the input via <label for="..."> or aria-label / aria-labelledby. The top value labels (.tng-slider-labels) are visual — they do not provide an accessible name by themselves.
Use aria-valuetext when the numeric value alone is not meaningful (e.g. aria-valuetext="50%" or aria-valuetext="Moderate").
Keyboard interaction
Section titled “Keyboard interaction”| Key | Action |
|---|---|
| ← / → | Decrease / increase value by one step |
| ↑ / ↓ | Decrease / increase value by one step |
| Home / End | Set to minimum / maximum value |
| Page Up / Page Down | Increase / decrease by a larger step (browser-defined) |
Native <input type="range"> handles all of the above automatically.
Disabled state
Section titled “Disabled state”Using the native disabled attribute on <input type="range"> removes it from the tab order and announces it as disabled to assistive technologies.
The .is-disabled class on .tng-slider-thumb is visual only — pair it with aria-disabled="true" if used on a custom role="slider" element.
Datalist
Section titled “Datalist”Use .sr-only on <datalist> to visually hide it — browser rendering of datalist for range inputs is inconsistent (Safari renders nothing, Firefox ignores positioning). The list / id linkage still provides snap-to-step behavior where supported.
The visual .tng-slider-labels div should use role="presentation" since the labels are decorative duplicates of the datalist values and should not be announced separately.