> dependent on the slider values

That’s the tricky part for a JS free implementation, right? Or am I missing something?

I think they are suggesting using something like this, which does work to target certain attributes:

input[value="5"] { width: 20%; }

This could then be combined with the sibling selector to target the other one

input[value="5"] + input[value="11"] { width: 80%; }

Though I am unsure how to make it entirely workable (you probably need a simple event listener to set the DOM node value to the dynamic form value). Interesting exercise if nothing else, and I think it could be doable to reach a working solution.

I think it can be theoretically done, like it is mentioned in the comment above, but you would need a new block of CSS for every slider min/max/step combination. It feels it would be harder to maintain than the javascript version.

Plus it needs JS to work (the DOM's value has to be synced with the attribute value for this selector to work)

Yeah I was thinking about something similar, e.g. using attr()* and a pseudoelement to pass the value from DOM to CSS of a ::before/::after pseudo-element.

But that still feels like asking for trouble:)

Luckily I need to leave the house now, I'm feeling CSS naughty.

* IIRC support for anything besides `content:` is still very unstable.