CODEWITHSUNDEEP
ionic-frameworkionic3
mensch72
mensch72

Reputation: 41

How to change ion-range color dynamically in Ionic?

I need to change the color of an ion-range from TypeScript while it is dragging. So that for example it changes color when passing certain values.

I know a custom color can be set via variables.scss, But I can't find out whether this can be changed later from TypeScript.

Upvotes: 2

Views: 1516

Answers (1)

Sudarshana Dayananda
Sudarshana Dayananda

Reputation: 5265

You can catch ionChange event of ion-range to change its colour dynamically.

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';
    }
  }
}

Find working StackbBlitz Example Here.

Upvotes: 3

Related Questions