slider - 如何更改 Google MDL Lite 中的 slider 颜色

Question

我需要更改 Google MDL Lite 中的 slider 颜色。
http://getmdl.io/components/index.html#sliders-section

圆圈左右两侧线条的颜色正在变化，但圆圈保持蓝色。

任何想法。
谢谢。

Answer 1

首先，对于自定义颜色来说，有完美的 Customizer它会满足您的需要。

但是你的问题的答案是这些行(而不是在所有浏览器中测试它):

.mdl-slider {
    &:active::-webkit-slider-thumb,
    &::-webkit-slider-thumb {
        background: $your-color !important;
    }

    &:active::-moz-range-thumb,
    &::-moz-range-thumb {
        background: $your-color !important;
    }

    &:active::-ms-thumb,
    &::-ms-thumb {
        background: $your-color !important;
    }
}

但是，IE 中有焦点颜色和其他修复。因此，如果您想 100% 确定，请复制 this file with slider style并根据您的要求更改颜色变量($range-color、$range-bg-color、$range-faded-color 等)。或者使用第一个提到的解决方案。