本文介绍了垫滑块动态背景色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想根据该值更改垫子滑块背景的颜色,即每个值都有关联的颜色。
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示例:
Example stackblitz: https://angular-material-p9y14r.stackblitz.io
这篇关于垫滑块动态背景色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!