Open UI Proposal · Draft
The <rangegroup> element
A proof-of-concept for the proposed native multi-thumb range control. The baseline below renders with no custom CSS (approximates Chromium on macOS as an example for UA styles). Every other example demonstrates a different facet of the component’s API, constraints, and pseudo-element-based stylability. This is a proof-of-concept and the code at the moment is hypothetical.
Foundations
Baseline — native default
Two thumbs with no ::part overrides at all. The component’s built-in defaults aim for the Chromium-on-macOS
input[type="range"] look: 16px blue thumbs, a 4px rounded track, and a blue fill between the thumbs.
Show code
Foundations
Interactive price editor
Two-way binding between the component values and number inputs. Drag the handles to update the fields, or type in the fields to move the handles.
Show code
Foundations
Datalist integration
Pair the component with a <datalist> to snap values to discrete options. The component also enforces
a minimum distance of 25 between handles via
stepbetween="25".
Show code
Constraints and state
Stepbetween distance
stepbetween="10" enforces a minimum distance between adjacent handles, so they can never collide.
Show code
Constraints and state
Per-thumb constraints
Each thumb can have its own min and max. The thumb’s movement is restricted to
the tighter of its own bounds and the overall component’s bounds.
Show code
Constraints and state
Parent override constraints
If a thumb’s bounds exceed the component’s range, the component clamps them. Here the track is 100–200 but the thumbs try to go 0–300.
Show code
Constraints and state
Multi-handle constraints
Three handles where the middle one is constrained to a small central zone (30–70), while the outer handles have full range and can push it.
Show code
Constraints and state
Fully disabled group
The disabled attribute disables the whole control. All thumbs become non-interactive and are removed
from the tab order.
Show code
Constraints and state
Mixed disabled state
Individual thumbs can be disabled while the rest remain interactive. The button toggles the group-level disabled state to show that individual disabled flags persist on re-enable.
Show code
Three-plus thumb patterns
Crossfade overlap editor
A 3-thumb pattern modeled on a DAW crossfade. The outer thumbs set when Track A starts fading out and when Track B reaches full volume; the middle thumb biases the crossover point that determines which track dominates the overlap.
Show code
Three-plus thumb patterns
Opening hours selector
Four handles define morning and afternoon shifts on a single 8 AM–10 PM timeline. The datalist provides hourly tick labels with half-hour granularity.
Show code
Three-plus thumb patterns
Multi-handle temperature
Three handles set boundaries for cold / mild / warm / hot zones, each segment rendered in its own colour and each thumb with a matching glow.
Show code
Three-plus thumb patterns
Three-handle process flow
Three handles and styled ticks represent the boundaries between phases in a process. Each major tick gets its own colour, signaling the phase it marks.
Show code
Three-plus thumb patterns
Budget allocator
A complete visual transformation. Three thumbs split a 0–100 range into four colored budget bars, with
category labels anchored to each segment via CSS Anchor Positioning. An
aria-live region announces changes for assistive tech.
Show code
Creative styling
Floating anchored tooltips
Invisible handles plus CSS Anchor Positioning makes external tooltips read as the draggable thumbs. The visible “handle” pills are just anchored DIVs.
Show code
Creative styling
Classic OS look
Heavy custom styling on all parts to recreate a classic Win-style slider, with anchored tooltips.
Show code
Creative styling
Custom tick styling
Individual ticks and tick labels can be styled via CSS Parts. The 50% tick is highlighted with a different colour and height.
Show code
Creative styling
Histogram price filter
An Airbnb-style price filter. The histogram behind the slider previews item distribution; bars inside the active range light up in the brand accent. Pill thumbs with grip lines carry floating price tags via CSS Anchor Positioning.
Show code
Creative styling
Star rating filter
A two-thumb 1–5 star rating filter. The five stars below the track act as labels and snap targets via list — stars inside the selected range fill in gold, the rest stay hollow.
Show code
Creative styling
Color-stop gradient editor
Three color swatches author a linear-gradient(...) string. Each thumb's position becomes a gradient stop
in the preview above and in the slider's own segments below. The CSS string updates live; preset chips drive the setRangeValue API.
Show code
Creative styling
Styled timeline
Ticks dressed up as milestones on a project timeline. The start, middle, and end ticks are promoted with a distinct colour and height.
Show code
JavaScript API
Programmatic interaction
Use the component’s public methods and properties to get and set values from script.