How to select html5 range's pseudo-elements in JavaScript

Question

Is it possible to select <input type="range"> pseudo-elements with JS?

I can style elements like ::-webkit-slider-runnable-track in my css, but what if I want to change ::-webkit-slider-runnable-track 's background-color after some event (like button click or whatever)?

Is it possible? Browsers support didn't make sense for now.

UPD : The question is how to style range's pseudo elements via JS. Let's say that I need to change range's track color dynamically. I can't just style it with css .

What I really need to is something like

document.getelementById('id').getPseudoElementSomehow('-webkit-slider-runnable-track').style = 'background: green'

Answer 1

As far as I know, you can't directly select pseudo elements with Javascript. The only solution is to add css rules on the expected events with CSSStyleSheet.insertRule() .

 var button = document.querySelector('button'); button.onclick = function() { document.styleSheets[0].insertRule('input[type=range]::-webkit-slider-runnable-track { background-color: red; }', 0); }; 

 .red { background-color: red; } 

 <input type="range"> <button>click me</button>