如何动态更新范围滑块

Question

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

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>

Answer 1

在这里你去：

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

oninput在IE10不支持，所以你必须同时使用，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>