Post

At #fronteers #DarkMode, @utilitybend.com proposed the <rangegroup> HTML Element. It unlocks the multi-handle range slider, a pattern you might have already seen when picking a price-range. Feedback Form (with links to the explainer and demos): docs.google.com/forms/u/0/d/...

✅ Fed back.

It won't let me edit my response, but one further thing I'd like to add would be `::slider-segment` state, e.g. `before`, `after`, `between` (rather than solely relying on `nth-child`) and—most importantly, imo—`capped` for styling areas of the slider which are 'constrained' by min/max.

Interesting. How would before, after and between work? You mean based on thumb then? A change I currently think of is rather a numbered segment instead of child. Eg: ::nth-segment(2) The benefit is that it's easy to manage no matter the amount of thumbs. For example 4 in my opening hours example.

The use-case I was thinking about is dynamically changing the number of ranges within the group and avoiding having to restyle, but actually with a fresh mind (and coffee), it's clear `nth-child`/`nth-last-child` solves that anyway – so ignore the first half of my reply.

For the second part: I do think a pseudo-element for the min/max constrained area of the first/last slider-segment would be useful, so you could style that differently (for example adding cross-hatching, maybe a right/left border to indicate the stopping point)