mat-slider 动态背景颜色答案

【问题标题】：mat-slider dynamic background colormat-slider 动态背景颜色
【发布时间】：2018-12-11 02:11:00
【问题描述】：

我想根据值更改垫子滑块背景的颜色，即每个值都有一个关联的颜色。

我发现我可以像这样覆盖背景颜色：

::ng-deep .mat-accent .mat-slider-track-fill {
  background-color: red;
}

但是我该如何动态设置呢？

【问题讨论】：

标签： angular angular-material-6

【解决方案1】：

我将为每个值/颜色创建 CSS 类，然后使用动态容器 ID 覆盖子滑块的 CSS 类。

HTML

<div id="{{'container-' + slider.value}}">
  <md-slider #slider min="1" max="5" step="1" value="1"></md-slider>
</div>

CSS

#container-1 /deep/ .mat-accent .mat-slider-track-fill {
  background: red!important;
}

#container-2 /deep/ .mat-accent .mat-slider-track-fill {
  background: blue!important;
}

#container-3 /deep/ .mat-accent .mat-slider-track-fill {
  background: green!important;
}

#container-4 /deep/ .mat-accent .mat-slider-track-fill {
  background: yellow!important;
}

#container-5 /deep/ .mat-accent .mat-slider-track-fill {
  background: purple!important;
}

stackblitz 示例：https://angular-material-p9y14r.stackblitz.io

【讨论】：

太棒了！谢谢！我没想过把它绑定到一个 id 上。

【解决方案2】：

我会为每个值/颜色创建 CSS 类，然后使用 ngClass 动态分配。

HTML

<div id='container' [ngClass]="['slider-bg-' + slider.value]">
  <md-slider #slider min="1" max="5" step="1" value="1"></md-slider>
</div>

CSS

.slider-bg-1 {
  background-color: red;
}
.slider-bg-2 {
  background-color: blue;
}
.slider-bg-3 {
  background-color: green;
}
.slider-bg-4 {
  background-color: yellow;
}
.slider-bg-5 {
  background-color: purple;
}

stackblitz 示例：https://angular-material-dfpafj.stackblitz.io

【讨论】：

谢谢，我的标题措辞不佳。我实际上对更改背景颜色并不感兴趣，而是对“.mat-accent .mat-slider-track-fill”类感兴趣。我的困惑是如何设置该值，因为它看起来不像背景颜色那样直接在垫子滑块上。
@Crhis，我已经提交了第二个答案，它使用了相同的概念，但使用了一个动态容器 ID，然后覆盖了您确定的 CSS 类。免责声明，我从未使用过深度选择器。如果你更喜欢新的答案，我会删除第一个。