style ::-webkit-slider-thumb with jquery [duplicate]

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