Post

Bramus
@bram.us

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/...

7 reposts43 likes

Ryan Townsend
@twnsnd.com

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.

Brecht De Ruyte
@utilitybend.com

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.

Ryan Townsend
@twnsnd.com

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.