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.

Answer 1

Try like this :

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

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

Answer 2

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 :

https://stackblitz.com/edit/input-range-dynamic-value-change