[Y-bar]

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.

[stankot]

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.

[KTibow]

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

[rpastuszak]

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.