md滑块自定义颜色滑块-ANGULAL MATERIAL

Question

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

Answer 1

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示例

Answer 2

您可以通过覆盖滑块的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-reo 中找到它们

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;
}

这可以在需要时更改气球的颜色