获取Angular中输入范围的实时值

Question

我正在使用此代码获取滑块的值：

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

不幸的是，valueChanged方法是在鼠标按下时触发的。拖拉拇指时如何连续通知变化？

(onmousemove)不起作用。

Answer 1

试试这样：

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

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

Answer 2

您需要使用(input)：

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

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

以下是工作示例的链接，请查看：

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

Answer 3

您可以使用ngModel来获取此信息，或者您必须使用formcontroller。 在下面的示例中，我使用ngmodel完成了此操作;

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

如果您想使用表单控制器，请使用。

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