在jQuery HTML5范围滑块中的实时输出
在jQuery HTML5范围滑块中的实时输出
提问于 2014-10-17 16:30:58
我正在尝试将HTML5输入范围滑块的实时输出输入到javascript变量中。现在，我正在使用<input type="range" id="rangevalue" onchange="arduino()">
我的工作方式是做我想做的事，但这不是“现场直播”。我想要它，所以当你拖动滑块，它更新变量，而不只是一次你放手。例如:当我将滑块从1拖动到5时，我希望在拖动时更新变量，因此它将使用1,2,3,4,5进行更新，而不仅仅是在释放滑块后从1跳到5。
做这样的事有可能吗？有什么建议吗？我使用的jQuery滑块插件，但它不是触摸兼容，这消除了它的目的。
谢谢大家提前提供帮助！
编辑-我一定解释得不够好，我知道如何得到一个范围滑块的价值，我只是想从它得到一个“活”输出。
回答 5
Stack Overflow用户
回答已采纳
发布于 2014-10-17 17:16:14
$("#rangevalue").mousemove(function () {
$("#text").text($("#rangevalue").val())
})jsFiddle实例
或者在普通的JS中：
var inp = document.getElementById('rangevalue');
inp.addEventListener("mousemove", function () {
document.getElementById('text').innerHTML = this.value;
});Stack Overflow用户
发布于 2014-10-17 17:08:18
是的是可能的。我们需要做的是使用带有布尔值的.mousedown()和.mouseup()来跟踪鼠标mousedown。当鼠标按住时，将mousedown设置为true，并使用不断更新该值的setTimeout。这样，当您拖动滑块时，值将不断更新。例如：
<label id="text">0</label>
<input type="range" value=0 min=0 max=10 id="rangevalue">JavaScript
var mouseDown = false
$("#rangevalue").mousedown(function() {
mouseDown = true;
updateSlider()
});
$("#rangevalue").mouseup(function() {
mouseDown = false;
});
function updateSlider() {
if(mouseDown) {
// Update the value while the mouse is held down.
$("#text").text($("#rangevalue").val());
setTimeout(updateSlider, 50);
}
}这是一把小提琴
Stack Overflow用户
发布于 2014-10-17 20:29:40
您还可以使用oninput属性。
<input type="range" min="5" max="10" step="1"
oninput="arduino()" onchange="arduino()">页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26429492
复制相关文章
相似问题
腾讯云开发者
