离子2-范围滑块

Question

我有一个离子2范围滑块组件，我想做的是在滑块上设置梯度颜色。因此，基本上从0到10，其中0为灰色，10为红色。我如何使用颜色梯度设计射程滑块？

这是我的范围滑块：

  <ion-item text-wrap>
    <ion-label stacked>Beperking: </ion-label><ion-badge item-right color="secondary">{{ Beperking }}</ion-badge>
    <ion-range min="0" max="10" [(ngModel)]="Beperking" color="secondary" pin="true">
      <ion-label range-left>0</ion-label>
      <ion-label range-right>10</ion-label>
    </ion-range>
  </ion-item>

当颜色高于某个值时，我该如何更改颜色？

Answer 1

当数字像这样更改时，请触发方法：

     <ion-range #x (ionChange)="myMethod(x.ratio)" ...>
        ...
     </ion-range>

然后，您的方法应将返回比率映射到特定的颜色，这里有一个很好的例子：https://codepen.io/zhipeng/pen/gbdde