无需 jQuery 即可更改滑块手柄颜色

没有直接修改伪选择器的简单方法。有一种相当复杂的方法可以在这里找到

如果您只想使用预定义数量的颜色，最好的方法是为您想要的所有不同颜色设置类，然后简单地更改元素的类。

.slider::-webkit-slider-thumb
{
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    background: #00AA00;
    cursor: pointer;
}

.slider::-moz-range-thumb
{
    width: 25px;
    height: 25px;
    background: #00AA00;
    cursor: pointer;
}

.slider.red::-webkit-slider-thumb,
.slider.red::-moz-range-thumb
{
    background: red;
}

.slider.blue::-webkit-slider-thumb,
.slider.blue::-moz-range-thumb
{
    background: blue;
}

然后对于js：

document.querySelector('.slider').className = 'slider red';

如果您希望能够将其设置为任何随机颜色，请查看我提到的第一个链接。