如何设置垫滑块颜色动态

Question

我想更改垫子滑块的颜色动态。我有一个应用程序，用户可以从色标中选择任何一种颜色，我想将该颜色显示为滑块颜色。

我知道您可以在color属性中添加自定义颜色名称，但就我而言，颜色名称不是固定的。可以是色pa中的任何颜色。

<mat-slider [(ngModel)]="lifeArea.weighting" [name]="lifeArea.title" thumbLabel="true" color="green" thumbLabel min="0" max="10" step="1"></mat-slider>

在此，我将在lifeArea.color中获得颜色代码

Answer 1

在使用材料成分时， 颜色属性仅接受主题中默认的三种颜色，即主色，警告色和强调色。

如果要为材料组件分配自定义颜色，则可以为其分配类，并为该颜色提供所需的CSS。

对于您来说，颜色是动态填充的。 因此，您可以使用ngStyle指令来实现此目的。

Answer 2

据我所知，您无法根据需要设置颜色。滑垫滑块的颜色应根据Angular Material documentation为ThemePalette。

要做到这一点，Angular Material应该支持主要，强调，警告之外的其他颜色，但事实并非如此。

我认为您唯一的选择是定义一个覆盖了mat-silder样式的css样式表来设置背景颜色：

1. 定义一个包含默认Mat-Slider颜色的css变量
2. 使用此变量设置所有必需的css属性
3. 更改颜色时更改css变量的值

Answer 3

尝试一下：

HTML

<mat-slider [(ngModel)]="lifeArea.weighting" [name]="lifeArea.title" 
thumbLabel="true" [color]="lifeArea.color" thumbLabel min="0" max="10" step="1"></mat-slider>

您需要使用color属性进行属性绑定。