使用jQuery更改纯HTML Slider-Thumb颜色（包括工作的CSS）

Question

我想用jquery改变Slider-thumb的颜色，但是问题是，如果我将它与jquery一起使用，我在StyleSheet中使用的相同CSS代码将无法正常工作。 下面的示例有一个可工作的css，用于更改拇指颜色，还有一个jquery按钮，应执行相同的操作。 有什么解决方案，如何用jquery做到这一点？

编辑：拇指是移动的东西。 在这种情况下，大圆蓝。 我想改变拇指而不是轨迹

的HTML

<input class="topcoat-range-input" type="range" value="0" min="0" max="100" data-role="none" step="1">
<div class='button'>Change Color!</div>

的CSS

.topcoat-range-input::-webkit-slider-thumb {
    height: 40px;
    width: 40px;
    border: 1px solid rgba(0, 0, 0, 0.36);
    border-radius: 30px;
    background: rgba(131, 208, 255, 0.75);
    box-shadow: 0 0 20px 2px rgba(131, 208, 255, 0.75);
}

的JavaScript

$('.button').on('click', function (e) {
    $('.topcoat-range-input::-webkit-slider-thumb').css('background', 'rgba(255, 208, 255, 0.75)');
});

演示版

http://jsfiddle.net/qcn6tmpz/3/

Answer 1

如果删除::-webkit部分，则效果很好：

$('.button').on('click', function (e) {
    $('.topcoat-range-input').css('background', 'rgba(255, 208, 255, 0.75)');
});

编辑：由于您需要-webkit部分，一种（稍微凌乱）的方法是每次单击按钮时添加一个样式规则：

$('.button').on('click', function (e) {
    $("<style type='text/css'>.topcoat-range-input::-webkit-slider-thumb{background:rgba(255, 208, 255, 0.75)}</style>").appendTo($("head"));
});

Answer 2

jQuery选择器错误

$('.button').on('click', function (e) {
    $('.topcoat-range-input').css('background', 'rgba(255, 208, 255, 0.75)');
});

在您的情况下，我将尝试对此按钮覆盖css。

.topcoat-range::-webkit-slider-thumb

普通的javascript似乎可以正常工作：

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="rgba(255, 208, 255, 0.75)";
    }
}

Answer 3

使用类.button将事件正确附加到div

 $(document).on('click','.button', function (e) {

   $('.topcoat-range-input').css('background', 'rgba(255, 208, 255, 0.75)');
});

**

http://jsfiddle.net/qcn6tmpz/4/

Answer 4

另一种方法是用拇指的背景色定义类。 当值更改时，设置对应于该值的类名。 例如，如果滑块的值为2，则我们定义一个提供预期背景颜色的类名：

.slider2::-webkit-slider-thumb {    
background: gray;    

}

处理类映射的JS应该看起来像这样。

var styles = {"1":"slider1","2":"slider2","3":"slider3"};

slider.oninput = function() {      
  slider.className = 'slider ' + styles[this.value];
}

请查看此链接以获取更多详细信息：

http://www.ozkary.com/2017/11/input-range-slider-with-color-indicator.html