イオン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

これは、スライダの変更をバルブに、変更イベントをマップする必要があります。これは、ターゲットコンポーネントのスタイルを変更する機能を起動するか、[]プロパティタグにネストしてデータバインディング。