如何在 Ionic 中动态更改离子范围颜色？

Question

我需要在拖动时将 ion-range 从 TypeScript 更改为颜色。因此，例如它在传递某些值时会改变颜色。

我知道可以通过 variables.scss 设置自定义颜色，但我不知道以后是否可以通过 TypeScript 更改。

Answer 1

您可以捕获 ion-range 的 ionChange event 以动态更改其颜色。

HTML

<ion-item>
  <ion-range [color]="color" min="1" max="100" pin="true"
          [(ngModel)]="number" 
          (ionChange)="onRangeChangeHandler()">
    <ion-icon range-left small name="sunny"></ion-icon>
    <ion-icon range-right name="sunny"></ion-icon>
  </ion-range>
</ion-item>

TS

export class HomePage {

number: number;
color: string;
  constructor() {

  }

  onRangeChangeHandler() {

    if (this.number > 0 && this.number < 26) {
        this.color = 'dark';
    }
    else if (this.number > 25 && this.number < 51) {
      this.color = 'primary';
    }
    else if (this.number > 50 && this.number < 76) {
      this.color = 'secondary';
    }
    else {
      this.color = 'danger';
    }
  }
}

找工作StackbBlitz Example Here.

如何在 Ionic 中动态更改离子范围颜色？

How to change ion-range color dynamically in Ionic?

ionic-framework

ionic3