Range
A thin tinted track with a square of frosted glass for a thumb; the fill follows --value, which aequitas.js keeps in sync.
Examples
Range
Tone
Anatomy
input[type=range] | The native range, no class. The track fills with the tone up to --value; the thumb is a square of glass tinted in the tone, so the fill shows through it and reaches exactly as far into it as the value. It takes a deeper tint under the pointer and a deeper shadow while held. |
[id] | Optional output element anywhere on the page, referenced by data-output. Shows the current value. |
API
| Attribute | Values | Description |
|---|---|---|
--value | <percent> | How far the track is filled. Default 0%. aequitas.js sets it from value, min and max. |
data-output | <id> | Id of an element whose text aequitas.js keeps equal to the value. |
data-tone | accentsuccesswarningdangerinfo | Colours the fill. Default accent. |
min | <n> | Native lower bound; the fill is measured from it. Default 0. |
max | <n> | Native upper bound. Default 100. |
Behaviour
On load and on every input event, aequitas.js sets --value from the range's value, min and max, and writes the value into the data-output element. Without it the thumb moves but the fill stays at whatever --value you set.
From aequitas.js. It initialises itself and enhances markup added later on its own, so it works the same in an SPA.
Accessibility
- Label it with
<label for>; the slider announces its own value. - The demo's output sits inside the
<label>, so it also becomes part of the name. That is fine for a short number; move it out of the label for anything longer. - Add
aria-valuetextwhen the number needs a unit to make sense ("62 percent"). - Focus draws the ring on the thumb.
- The value reads from where the tone fill ends against the track (3:1 or more). The track carries the control edge and the glass thumb a stroke in the fill’s tone, so the control can be found at any value, 0 included.
| Key | Effect |
|---|---|
| ← / ↓ | Decreases by one step. |
| → / ↑ | Increases by one step. |
| Home / End | Jumps to min or max. |
| PageUp / PageDown | Moves in larger steps. |