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

Answer 2

为此，您需要将滑块中的更改映射到阀门，并在更改事件时触发一个可以更改目标组件样式的函数，或者可以将它嵌套在[]属性标记中以使用数据绑定。