<rangegroup>

Native multi-thumb sliders for HTML

Brecht De Ruyte / Open UI Community Group

The Multi-Thumb Problem

  • Proliferation of third-party JavaScript
  • Inconsistent custom keyboard handling
  • Fragile synthetic ARIA synchronization
  • Broken assistive technology experiences

Light DOM Architecture

Composing native range inputs onto a unified trackx

Standard Markup Structure

<rangegroup min="0" max="1000">
  <legend>Price Range</legend>
  <label>Min <input type="range" name="min" value="100"></label>
  <label>Max <input type="range" name="max" value="750"></label>
</rangegroup>
  • Follows <fieldset> grouping model
  • Child inputs submit name/value pairs
  • Easy to polyfil if required

Group & Handle Labeling

  • <legend> provides group accessible name
  • <label> wraps individual range inputs to name thumbs
  • Implicit DOM association
  • Zero manual ARIA required(?)

Created for modern CSS

  • With little scripting output via anchor positioning above thumbs
  • Styling capabilities for segments, thumbs, etc..
Preserving native slider keyboard conventions
Preventing repetitive screen reader speech fatigue

Cascading Disabled States

  • disabled on <rangegroup> cascades
  • Thumbs removed from tab order
  • Independent per-handle disabling supported
  • stepbetween enforces spacing constraints (should be announced by SR)
  • Overlapping thumbs is not possible by design, keeps labeling correct

Designed with accessibility in mind

  • Using known patterns helps. But a lot of work to be done.
  • A lot of accessibility fine control to be defined.
  • Trying to get this in good shape from the start in order to move forward
A picture of a phone with a thinking emoji
Photo by Markus Winkler on Unsplash

Early tested with a web component prototype

Collaborate With Open UI

We're looking forward to your valuable help

Thank you