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?

1 Like
2

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

4 Likes
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()”>

2 Likes
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?

1 Like
10

that should trigger the ionChange

11

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

4 Likes
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”>