style ::-webkit-slider-thumb with jquery

Question

I have some sliders which I want to style via jquery For example:

<input type="range"/>

To style it with plain css I would write:

input[type="range"]::-webkit-slider-thumb{
/* blah blah blah*/
background:red;
}

This is working. However if I try this:

$("input[type='range']::-webkit-slider-thumb").css("background","red");

It will not give me an error but it also will not work. I have seen some other similar questions .The answer to these questions were to insert a new style tag with jquery and some classes(Something i don't want to do).Is there any way to style ::-webkit-slider-thumb with jquery? UPDATE I don't want to inject any new style tags to my html or use custom classes!!!

Answer 1

Plain JavaScript could work for this:

for(var j = 0; j < document.styleSheets[1].rules.length; j++) {
    var rule = document.styleSheets[1].rules[j];
    if(rule.cssText.match("webkit-slider-thumb")) {
        rule.style.backgroundColor="red";
    }
} 

Here is an Example

---

Because ::-webkit-slider-thumb is pseudo-element jQuery cannot select it, which leaves you with limited options to style this.

---

You could optionally use jQuery:

$("input[type='range']").addClass('slideThumb');

and then using CSS add:

.slideThumb::-webkit-slider-thumb {
   background: red;
}

but this would be equivalent of simply adding the class directly onto your input:

<input class="slideThumb" type="range"/>

Answer 2

CSS

.redslider::-webkit-slider-thumb {
    background-color: red;
}

jQuery

$('input[type=range]').addClass('redslider');

Why?

::-webkit-slider-thumb isn't actually a selector. It's like setting an :active through a style attribute which isn't possible. That makes it so we have to make it in a class and add it. You could use document.styleSheets but that is ambiguous, complicated, and is overkill for a simple task such as this