md-slider 自定义颜色滑块 - ANGULAR MATERIAL

Question

我正在研究 md-slider，我的问题是我们如何才能拥有滑块的颜色，默认情况下有两个类 md-warn（红色）和 md-初级（白色）。我想要白色滑块。我怎样才能做到这一点？

Answer 1

您可以通过覆盖滑块的 css-class 来实现自定义颜色。

#red-slider .md-thumb:after, #red-slider .md-track{
    background-color: greenyellow !important;
    border-color: greenyellow !important;
}
#red-slider .md-focus-thumb, #red-slider .md-focus-ring{
    background-color: greenyellow;
}

css class要覆盖：

.md-thumb:after
.md-track
.md-focus-thumb 
.md-focus-ring

我没有测试滑块的所有功能。但基本上你必须覆盖滑块的所有样式。您可以在 git repo

找到它们

Answer 2

答案非常有用，但是这与默认滑块的功能不太匹配，因为 md-thumb 的右侧最终颜色与其余部分相同滑块。通过改变 .md-track 到 .md-track-fill，您将匹配默认功能。因此，代码将如下所示：

#red-slider .md-thumb:after, #red-slider .md-track-fill{
    background-color: greenyellow !important;
    border-color: greenyellow !important;
}
#red-slider .md-focus-thumb, #red-slider .md-focus-ring{
    background-color: greenyellow;
}

CodePen example

Answer 3

此外，您可以通过以下代码自定义 md 滑块上气球的颜色：

#red-slider .md-sign, #red-slider .md-sign {
    background-color: blue;
    border-top-color: blue;
}

#red-slider .md-sign:after, #red-slider .md-sign {

    border-top-color: blue;
}

这可以根据需要改变气球的颜色

md-slider 自定义颜色滑块 - ANGULAR MATERIAL

md-slider custom color slider - ANGULAR MATERIAL

angularjs

angularjs-directive

angular-material