Как настроить цветовую динамику мат-слайдера

Question

Я хочу изменить динамику цвета мат-слайдера.У меня есть приложение, в котором пользователь может выбрать любой цвет из цветового неба, и я хочу показать этот цвет как цвет ползунка.

Я знаю, что вы можете добавить свое имя цвета в атрибуте цвета, но в моем случае имя цветане фиксируется.Это может быть любой цвет из цветового неба.

<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

При использовании компонентов материала атрибут Color принимает только три цвета: основной, предупреждение и акцент, которые являются стандартными в вашей теме.

Если вы хотите назначить пользовательский цвет компоненту материала, вы можете назначить ему класси дайте необходимые CSS для этого цвета.

В вашем случае, цвет динамически заполняется.Таким образом, вы можете достичь этого с помощью директивы ngStyle.

Answer 2

Как я знаю, вы не можете установить цвет так, как хотите.Цвет ползунка должен быть ThemePalette в соответствии с документацией Angular Material .

. Для этого Angular Material должен поддерживать дополнительные цвета вне основного, акцентного, предупреждающего, но это неcase.

Я думаю, что единственный вариант, который у вас есть, - это определить стиль таблицы css, перекрывающий стиль mat-silder, чтобы установить цвет фона:

1. Определите переменную 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.