Change event on input of type range is not working in Angular2 IE 11

Question

I can able to get the expected result in Chrome and Firefox but not in IE 11. Even ngModel is also not updating when I change the range.

With the below code I can able to get the alert in the IE but the method assigned to (change) is not working.

Any suggestions please!

<input type="range" 
       min = "{{_minimumRangeOfSlider}}" 
       max="{{_maximumRangeOfSlider}}" 
       value="{{_currentRange}}"
       (change) = "plainValueChanged($event)"
       onchange="alert()"
       [(ngModel)] = "_currentRange"
       class="reports-range-slider">

Looks like a dup of http://stackoverflow.com/questions/18544890/onchange-event-on-input-type-range-is-not-triggering-in-firefox-while-dragging — Günter Zöchbauer, Oct 04 '16 at 06:35
I think no, why ngModel is also not updating when I change the range in IE ? — Devx, Oct 04 '16 at 06:41

score 3 · Answer 1 · answered Oct 20 '16 at 20:09

3

I got this solved by adding a change event to the range input like so:

<input type="range" [(ngModel)]="_currentRange" (change)="onChange($event.target.value)">

You have to make a onChange function in your component to assign what is passed to your value variable.

onChange(value:number):void {
    this._currentRange = value;
  }

answered Oct 20 '16 at 20:09

Marin Petkov

2,128
4
17
23

1

function call did not get triggered this way in angular 6 at least on my end – Rahul Sonwanshi Mar 19 '20 at 15:07

Change event on input of type range is not working in Angular2 IE 11

1 Answers1