如何更改Google MDL Lite中的滑块颜色

Question

我需要更改Google MDL Lite中的滑块颜色。
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等）。或者使用第一个提到的解决方案。