动态样式HTML5范围滑块

Question

我正在尝试使用HTML5范围滑块，它会根据元素的类改变它的样式。我有基本的静态样式，但这让我很难过。

我能够通过继承应用类的背景来设置音轨的样式，即：

input[type=range].styled {
    background: blue;
}

input[type=range]::-webkit-slider-runnable-track { //I also have the other browser specific rules that do the same thing.
    background: inherit
}

但是现在我不知道如何设置滑块拇指的样式。我不能继承，因为它会消失在赛道上。我试过这样做：

input[type=range].attr1::-webkit-slider-thumb {
    background: red;
}

但它没有任何效果。当我向Chrome Inspector添加相同的规则时，它可以正常运行，但规则是灰色的。

从我所看到的，范围滑块往往是棘手的风格，主要是由于浏览器支持问题等，但如果可能的话，我真的想使用它而不是从头开始创建范围滑块。有没有办法做到这一点？