How can I call a method if my Ionic 2 range slider changes value

Question

I'm working on an Ionic 2 app and playing around with the range, as described here: https://ionicframework.com/docs/v2/api/components/range/Range/

Call me crazy, but I can't find anywhere on google how the range component can call a method in my .ts class once the value has changed.

Something like a button, which goes like this:

<button ion-button (click)="myMethod($event)">

Of course, I need the value of the slider. In my case I defined it as follows:

  <ion-range min="0" max="10" color="danger">
    <ion-label range-left>0</ion-label>
    <ion-label range-right>10</ion-label>
  </ion-range>

Anyone got an idea?

RomanHotsiy · Accepted Answer · 2016-11-21 21:19:00Z

8

The answer is right in the docs in the section output-events:

ionChange Expression to evaluate when the range value changes.

Use it as follows:

<ion-range min="0" max="10" color="danger" (ionChange)="myMethod($event)">
  <ion-label range-left>0</ion-label>
  <ion-label range-right>10</ion-label>
</ion-range>

answered Nov 21, 2016 at 21:19

RomanHotsiy

5,1482 gold badges30 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rens Groenveld Over a year ago

I feel silly.. Must have had my eyes closes while I browsed through the docs. Thanks mate.

Khurshid Ansari · Accepted Answer · 2018-10-28 11:50:13Z

1

Try in this way.

public myMethod(newRangeValue){
 console.log("Range :"+newRangeValue); 
}

<ion-range min="0" max="10" color="danger" [(ngModel)]="modelRange" (ionChange)="myMethod($event)">
  <ion-label range-left>0</ion-label>
  <ion-label range-right>10</ion-label>
</ion-range>
New value : {{modelRange}}

answered Oct 28, 2018 at 11:50

Khurshid Ansari

5,1142 gold badges39 silver badges63 bronze badges

Collectives™ on Stack Overflow

How can I call a method if my Ionic 2 range slider changes value

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related