如何动态更新范围滑块
问题描述:
我创建了以下代码以向用户显示其范围滑块值。但是,它仅显示用户停止移动滑块时的值。有没有办法显示值,而用户拖动范围滑块?我正在寻找一种在香草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>
答
在这里你去:
<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
答
的OnMouseMove功能做到这一点:
<input type="range" name="rangeInput" min="0" max="100" onmousemove="document.getElementById('textInput').innerHTML=this.value;">
<p id="textInput"></p>
感谢收看了兼容性! – 2014-10-30 15:10:39