JSFiddle - React, Tailwind, and code Playground

HTML

<input type="range"/>

CSS

input[type=range]::-webkit-slider-thumb {
   
}
input[type=range]{
    -webkit-appearance: none;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]:focus {
    outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

JavaScript

//$('input[type=range]::-webkit-slider-thumb').css({"background":"goldenrod"});
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";
        rule.style.height="16px";
        rule.style.width="16px";
        rule.style.marginTop ="-4px";
        rule.style.borderRadius="50%";
        rule.style.webkitAppearance="none";
        rule.style.border="none";
    }
}