有没有办法在 <input type='range'> 的每一步更改时调用一个函数？答案

【问题标题】：Is there a way to call a function on each step change of <input type='range'>?有没有办法在 <input type='range'> 的每一步更改时调用一个函数？
【发布时间】：2021-10-29 01:35:18
【问题描述】：

我在 HTML 中有一个简单的引导滑块，我希望它显示一个用户选择的值，而用户仍在决定该值。

现在的html：

<div  class="container-sm position-fixed w-25 bottom-0 end-0">
   <label for="customRange1" class="form-label" #zoom_label>Example range</label>
   <input type="range" class="form-range" id="customRange1" min="0.2" max="5.0" step="0.1" 
   #zoom (mousedown)="test2(zoom, zoom_label)">
</div>

我正在使用 Angular 12；我尝试使用 OnChange 事件，但仅在用户更改滑块位置时才调用函数。 OnMouseDown 似乎正在调用，但输入的值没有按预期改变。

【问题讨论】：

onInput 也许？

标签： javascript html angular typescript

【解决方案1】：

尝试改用input 事件：

<div  class="container-sm position-fixed w-25 bottom-0 end-0">
   <label for="customRange1" class="form-label" #zoom_label>Example range</label>
   <input type="range" class="form-range" id="customRange1" min="0.2" max="5.0" step="0.1" 
   #zoom (input)="test2(zoom, zoom_label)">
</div>

【讨论】：

非常感谢，老实说，我什至不知道它适用于范围输入