изменить цвет ползунка диапазона на основе значения

Question

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

masterRangeslider:Number;

<div class="wrap">
    <input name="range" type="range" class="range-slider__range" [(ngModel)]="masterRangeslider" [ngStyle]="{ 'background': 'linear-gradient(90deg, hsl('+ (10 * masterRangeslider +', 90%, 50%) '+ (10 * masterRangeslider +'%, #d7dcdf 0%)'  }" min="0" max="10">
     <div class="rating" [ngStyle]="{ 'left': ((10 * masterRangeslider - 3) + '%' }">{{masterRangeslider}}</div>
</div>

Answer 1

Вы просто забыли закрыть скобки в ngStyle (10 * masterRangeslider) <--- </p>

Просто используйте приведенный ниже код.

<div class="wrap">
    <input name="range" type="range" class="range-slider__range" [(ngModel)]="masterRangeslider" [ngStyle]="{ 'background': 'linear-gradient(90deg, hsl('+ (10 * masterRangeslider) +', 90%, 50%) '+ (10 * masterRangeslider) +'%, #d7dcdf 0%)'  }" min="0" max="10">
     <div class="rating" [ngStyle]="{ 'left': ((10 * masterRangeslider - 3) + '%' }">{{masterRangeslider}}</div>
</div>