垫滑块动态背景色 [英] mat-slider dynamic background color

问题描述

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

I'd like to change the color of the mat-slider background based on the value, i.e. each value has an associated color.

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

I see that I can override the background-color like so:

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

但是我如何动态设置呢？

But how might I set it dynamically?

推荐答案

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

I would create CSS classes for each value/color, then use a dynamic container ID to override the child slider's CSS classes.

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

Example stackblitz: https://angular-material-p9y14r.stackblitz.io

这篇关于垫滑块动态背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！