mat-slider动态背景色

Question

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

我看到我可以像这样覆盖背景颜色：

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

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

Answer 1

我会为每个 value/color 创建 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

Answer 2

我会为每个 value/color 创建 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

mat-slider动态背景色

mat-slider dynamic background color

angular

angular-material-6