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
– Paulie_D, Commented Nov 28, 2018 at 16:49
Maybe this will help you: stackoverflow.com/questions/5041494/… — Khauri
– Khauri, Commented Nov 28, 2018 at 17:23

Andy · Accepted Answer · 2018-11-28 17:08:40Z

1

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>

edited Nov 28, 2018 at 17:08

answered Nov 28, 2018 at 16:52

Andy

63.6k13 gold badges72 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Paul Evers Over a year ago

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.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related