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

Question

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

我知道可以通过variables.scss设置自定义颜色，但是我无法确定以后是否可以从TypeScript进行更改。

Answer 1

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

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.