如何動態更新範圍滑塊

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>