Question

我创建了以下代码，向用户显示其范围滑块值。但是，它仅显示用户停止移动滑块时的值。有没有办法在用户拖动范围滑块时显示值？我正在寻找一种在香草JS中做到这一点的方法。

＆＃13;

function updateInput(val) {
      document.getElementById('textInput').innerHTML=val; 
    }

＆＃13;

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

＆＃13;

Answer 1

你走了：

<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。

以下是 demo

Answer 2

使用oninput代替onchange。

Magical proof!

Answer 3

onmousemove函数可以实现这一点：

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

如何动态更新范围滑块

3 个答案: