How to select class::-webkit- in JS/JQuery

Question

I need to select a css class named .slider::-webkit-slider-thumb to change a property. I have tried a multiple array of options, but JS doesn't seem to select it.

document.addEventListener("DOMContentLoaded", function (event) {
 var slider = document.getElementById("importanceSlider");
 var knob = document.getElementsByClassName(".slider::-webkit-slider-thumb");

 knob.style.background = "#ffffff"; });

CSS:

.slidercontainer{
    width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 25px; 
background: #e9ecef;
outline: none;
border-radius: 50px;
}

.slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 10%;
height: 25px; 
background: #dc3545;
border-radius: 50px;
}

HTML:

<div class="slidecontainer">
     <input type="range" min="0" max="10" value="5" 
    class="slider" id="importanceSlider" name="importance">
</div>

I want to change the width value of .slider::-webkit-slider-thumb in particular, depending on the value of the slider.

Any help would be appreciated

I suspect this *may* not be possible as the thumb isn't in the DOM much like most pseudo-elements. — Paulie_D, Nov 28 '18 at 16:49
Maybe this will help you: https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin — Khauri, Nov 28 '18 at 17:23

Andy · Answer 1 · 2018-11-28T17:08:40.337

First, you should be aware that the pseudo-selector is non-standard...

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

...so be wary using it.

If you are using it in a compatible browser there's a further issue:

You seem to be confusing querySelector and getElementsByClassName. The former allows you to grab elements using CSS selectors, the latter doesn't. Also, the latter returns a list of nodes.

Also, you should think about using a stylesheet rather than naming your class like that.

Here's a couple of solutions:

1) querySelector

var knob = document.querySelector(".slider");
knob.classList.add('blue');

.slider::-webkit-slider-thumb {}
.blue { background-color: blue; }

<button class="slider">Carrot</button>

2) getElementsByClassName

var knob = document.getElementsByClassName("slider");

// Grab the first element from the list
knob[0].classList.add('blue');

.slider::-webkit-slider-thumb {}
.blue { background-color: blue; }

<button class="slider">Carrot</button>

Of course if you have lots of these elements you'll need to iterate over them. You can do that with getElementsByClassName, or you can use querySelectorAll instead:

var knobs = document.querySelectorAll(".slider");
[...knobs].forEach(knob => knob.classList.add('blue'));

.slider::-webkit-slider-thumb {}
.blue { background-color: blue; }

<button class="slider">Carrot</button>
<button class="slider">Spam</button>
<button class="slider">Goat</button>

Thank you for your elaborate answer, however my problem hasn't been solved yet. Perhaps I should've been more precise. I want to change the knob of the slider depending on its value, and while your answer does help me adjust the slider, it does not work for individually changing the knob. I updated my question for more clearance. — Paul Evers, Nov 29 '18 at 00:25

How to select class::-webkit- in JS/JQuery

1 Answers1