Question

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

Answer 1

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

#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类：

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

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

找到它们

Answer 2

Visores'回答非常有用，但是这与默认滑块的功能完全匹配，因为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

3 个答案: