Range pair
Two native ranges on one track, for picking a span. Each thumb keeps its own keyboard and value; the fill runs between them.
Examples
Range pair
Bars 9–40
Tone
Anatomy
.range-pair | The track: tinted, filled with the tone from --from to --to. Give it role="group" and an aria-label that names the span. |
> input[type=range] | Exactly two, sharing min, max and step: the first is the start, the second the end. Their own tracks are clear; only the glass thumbs take the pointer, so either can be grabbed. |
API
| Attribute | Values | Description |
|---|---|---|
--from | <percent> | Where the fill starts, as a share of the track. Default 0%. aequitas.js sets it from the first input. |
--to | <percent> | Where the fill ends. Default 100%. aequitas.js sets it from the second input. |
data-tone | accentsuccesswarningdangerinfo | Colours the fill. Default accent. |
data-topon input | boolean | Set by aequitas.js on the thumb that sits on top: the one moved last, or, at a shared value, the one that can still move away from the other. |
data-output | <id> | On either input, as on a single range: an element whose text aequitas.js keeps equal to that value. |
Behaviour
On load and on every input event, aequitas.js keeps the first value at or below the second (a thumb stops where the other stands), sets --from and --to on the pair, and lifts the right thumb on top. Without it both thumbs work, but they can cross and the fill stays where --from and --to say.
From aequitas.js. It initialises itself and enhances markup added later on its own, so it works the same in an SPA.
Accessibility
- Both inputs are native sliders: each announces its own name and value. Name them for what they bound ("First bar", "Last bar"), and the group for the span.
- Add
aria-valuetextwhen a number needs a unit ("20 euros"), and update it from your owninputlistener: aequitas.js doesn't write it. - Each input still announces its full
minandmax, though it stops at the other thumb. Say so in itsaria-valuetext("40, up to 52") when the limit matters. - In right-to-left pages both the thumbs and the fill run from the right.
- In forced colours the track draws in GrayText, the span between the thumbs in Highlight, and the focused thumb in Highlight too, since both inputs share one outlined box.
- In a pair only the thumbs take the pointer, so they never shrink below the 24px target size, even in compact density.
- Clicking the bare track does nothing: only the thumbs move. Keyboard users are unaffected.
| Key | Effect |
|---|---|
| Tab | Moves from the start thumb to the end thumb: each is its own stop. |
| ← / ↓,→ / ↑ | Moves the focused thumb by one step; it stops at the other thumb. |
| Home / End | Jumps to min or max, or as far as the other thumb allows. |
| PageUp / PageDown | Moves in larger steps. |