Ion-range ionChange event not firing

Ionic Framework ionic-v3
1

I would appreciate if anyone could point out what I am missing.
Please see the plnkr

I have an ion-range control with buttons for “First”, “Prev”, “Next”, “Last” (for the plnkr I just put in the “Next” button). ngModel is bound to a variable, and the buttons change the variable as appropriate which in turn triggers the ionChange event to do stuff on the page… EXCEPT the first button click after a page load or reload changes the variable correctly and the range slider moves but the ionChange event is not triggered. After that first click everything works perfectly.
Any ideas on why and/or what I can do to get around this?

Thanks!
Rich

2

Your plunker code only needs one little addition to get the expected result:

  goNext(){
    this.slideIndex += 1;
    this.message = 'Index changed to ' + this.slideIndex;
  }

I don’t have a very solid and good explanation as to why this happens, but I’ll try to explain based on experience. The reasons may be that (ngModel) is bound to your range slider, and so is (ionChange). However, your button element is connected with a function that changes the slideIndex. When the function is called the first time, it just increases the slideIndex, but (ngModel) and (ionChange) do not pick up the change yet. Only after the 2nd press they communicate better and realise a change is happening.

In addition, when your code starts, your message variable is not set yet, only once (ionChange) realises there is a change happening, the message code is updated in the DOM.
By adding the above to the goNext() function, you immediately set the message when you increase the index.

So in short, (ngModel) and (ionChange) may not communicate too well when the page was just loaded. Somewhere I even read to avoid using them together in certain situations.

Hope this made sense!

3

Thanks, I guess that at worst if there really is a communication bug between ngModel and ionChange I can trigger a one-time call to the onIndexChanged() function from goNext(). It’s a bit hokey but it will work.