3 ms·
> dependent on the slider values That’s the tricky part for a JS free implementation, right? Or am I missing something?
by rpastuszak 2y ago
> dependent on the slider values
That’s the tricky part for a JS free implementation, right? Or am I missing something?
- Y-bar 2y agoI 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 2y agoI 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 2y agoPlus it needs JS to work (the DOM's value has to be synced with the attribute value for this selector to work)
- rpastuszak 2y agoYeah 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.