Ionic 2 How to Customize Ion-Range

How to customize ion-range in disabled state?

pointer-events:none stops you from interacting with it

<ion-range style="pointer-events: none;"value="{{ range }}" min="0" max="2" color="secondary"></ion-range>

:) my final answer

Ionic2, ion-range custom content of the range pin

This was my solution.

Note: I put this inside ionViewDidEnter.

this._elementRef.nativeElement
  .querySelector('.range-knob-handle')
  .addEventListener('pointermove', function () {
    const value = this.getAttribute('aria-valuenow');
    this.querySelector('.range-pin').textContent = `${value} hours`;
  });

So the main thing here is that the const value is the value selected on the range. After that you can do whatever you want with it and just set the textContent of the range-pin to fix the text.

How to change ion-range color dynamically in Ionic?

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.

---

Related Topics