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.
Try like this :
<input type="range" min="30" max="300" value="30" (input)="valueChanged($event.target.value)">
valueChanged(e) {
console.log('e', e);
}
(change) with (input) will do the needed. One can bind the input with a property and use the updated value in the angular code. <input type="range" min="0" max="100" [(ngModel)]="strokeWidth" (input)="setStrokeWidth()">{{strokeWidth}}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
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)
});
