Ion Range Slider Change Event

Ionic Framework ionic-v3
1

I’m using a range slider for some of my form input.

Something like this:

<'ion-range (change)=“updateResults();” dualKnobs=“true” pin=“true” formControlName=“myInput” min=“1” max=“28” step=“1” snaps=“true”>
But the (change) isn’t firing.

updateResults() then emits all the form input in my .ts file.

How can I fire an event every time an ion-range input changes?

2

(change) is the not the event name anymore, it has been updated. Please take a look at the docs

3

Works like a dream - thanks!

4

Hey, I wonder what happened to these docs? Now they list no events at all, other than this ionChange event?..can this still be done? I want to use the range slider as a seek bar for my audio, so when I release the range handle I want to get the value, not before…

UPDATE: debounce=“700” works check out this post

5

the docs still don’t make this clear, so now do we use (ratio)=“myFunc()”… or what…
I may seem like an absolute noob but i still cant really figure out how i access the variable a range slider produces in my typescript.

6

Try (ionChange) event

<ion-range [(ngModel)]=“sliderValue” color=“danger” pin=“true” (ionChange)=“change()”>

7

Perfect thank you! this works (just so others know aswell)

8

Works like a charm. @mhartington: the doc needs updating to show ionChange!!

Regards

Tom

9

So I have a midi player. What if it’s not the app changing the value of ion-range but the user changing the value?

10

that should trigger the ionChange

11

You can also use (ionBlur) to capture event after user stops moving the knob

12

To update label on range update, and update list only after user stops.

<ion-range [min]=“min” [max]=“max” [(ngModel)]=“salaryRange” (ngModelChange)=“setLabel()” (ionBlur)=“handleChange()” color=“secondary”>