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

【问题标题】：get live values of input range in Angular在Angular中获取输入范围的实时值
【发布时间】：2025-12-13 19:50:01
【问题描述】：

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

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

不幸的是，valueChanged 方法是在鼠标抬起时触发的。当拇指被拖动时，如何连续收到更改通知？

(onmousemove) 不起作用。

【问题讨论】：

【解决方案1】：

你可以使用 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)
    });

【讨论】：

【解决方案2】：

这里你需要使用(input)：

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

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

这是工作示例的链接，请看一下：

【讨论】：

【解决方案3】：

试试这样：

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

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

【讨论】：

实际上将(change) 替换为(input) 即可。可以将输入与属性绑定并使用角度代码中的更新值。 <input type="range" min="0" max="100" [(ngModel)]="strokeWidth" (input)="setStrokeWidth()">{{strokeWidth}}