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）中关闭括号<---

只需使用以下代码。

<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>

根据值更改范围滑块的颜色

1 个答案: