get live values of input range in Angular

Question

I am using this code to get the value of a slider:

<input type="range" min="30" max="300" value="30" (change)="valueChanged($event)"></div>

Unfortunately, the valueChanged method is triggered on mouse up. How can I be notified of changes continuously as the thumb is dragged?

(onmousemove) does not work.

please try: oninput check this [answer](https://stackoverflow.com/questions/18544890/onchange-event-on-input-type-range-is-not-triggering-in-firefox-while-dragging) — macrog, Oct 23 '17 at 10:43
thanls for stopping by. (oninput)="someFunc($event)" does nothing in angular — sanjihan, Oct 23 '17 at 10:56

score 9 · Accepted Answer · answered Oct 23 '17 at 11:28

9

Try like this :

<input type="range" min="30" max="300" value="30" (input)="valueChanged($event.target.value)">

valueChanged(e) {
    console.log('e', e);
}

answered Oct 23 '17 at 11:28

Chandru

Actually replacing `(change)` with `(input)` will do the needed. One can bind the input with a property and use the updated value in the angular code. `{{strokeWidth}}` – Ravi Misra Mar 03 '20 at 11:47

score 3 · Answer 2 · answered Oct 23 '17 at 12:38

Here it is you need to use (input) :

<input type="range" min="30" max="300" value="30" (input)="valueChanged($event)">

valueChanged(e) {
  console.log(e.target.value);
}

Here is the link to working example , please have a look :

score 3 · Answer 3 · answered Oct 23 '17 at 12:52

You can use ngModel to get this or you have to use formcontroller. In the below sample i have done this with ngmodel ;

<input type="range" [ngModel]="mymodel" (ngModelChange)="valueChanged($event)" min="30" max="300" value="30">

If you want to use form controller then please use .

this.FORMCONTROLLER.valueChanges.subscribe(formValue => {
        this.valueChanged($event)
    });

3 Answers3