angular - Angular Mat-Slider 自定义

Question

1. 动态更改拇指标签颜色
2. 轨迹填充颜色动态变化
3. 显示拇指标签并连续打勾
4. 增加滑块的高度
5. 使蜱更厚

标签： angular

Answer 1

这是一个有点旧的帖子，但我可以回答你的第一个问题，因为我必须自己弄清楚，没有任何帮助：

动态更改拇指标签颜色

您必须将以下代码放入 styles.scss：

    .mat-slider-thumb-label {
       background-color: red !important;
    }

然后你可以动态地从 ts 文件中操作这个 scss 设置，否则你会这样做：

在 Angular 中动态更改 styles.scss

如果您想在一个组件中自定义多个滑块，可以参考以下问题：

角度材料 6 个不同颜色的多个垫子滑块