如何动态更新范围滑块

How to dynamically update range slider

本文关键字：更新 范围 动态 何动态      更新时间：2023-09-26

我创建了以下代码来向用户显示其范围滑块值。但是，它只显示用户停止移动滑块时的值。有没有一种方法可以在用户拖动范围滑块时显示该值？我正在寻找一种在vanillaJS中实现这一点的方法。

function updateInput(val) {
      document.getElementById('textInput').innerHTML=val; 
    }
<input type="range" name="rangeInput" min="0" max="100" onchange="updateInput(this.value);">                                                       
    <p id="textInput"></p>

开始：

<input type="range" name="rangeInput" min="0" max="100" onchange="updateInput(this.value);" oninput="updateInput(this.value)" >                                                       
    <p id="textInput"></p>

IE10中不支持oninput，因此必须同时使用oninput和onchange。

这是演示

使用oninput而不是onchange。

神奇的证明！

onmousemove函数实现了这一点：

<input type="range" name="rangeInput" min="0" max="100" onmousemove="document.getElementById('textInput').innerHTML=this.value;">                                                       
    <p id="textInput"></p>
相关文章：