jQuery HTML5 范围滑块中的实时输出
我正在尝试将 HTML5 输入范围滑块的实时输出转换为 javascript 变量.现在,我正在使用 <input type="range" id="rangevalue" onchange="arduino()">
I'm trying to get a live output from a HTML5 input range slider into a javascript variable. Right now, I'm using <input type="range" id="rangevalue" onchange="arduino()">
我让它工作的方式是做我想做的事,但它不是活的".我想要它,所以当你拖动滑块时,它会更新变量,而不仅仅是在你放手时.例如:当我将滑块从 1 拖动到 5 时,我希望变量在拖动时更新,因此它将更新为 1,2,3,4,5 而不仅仅是从 1 跳到 5 一次我松开滑块.
The way I have it working is doing what I want, but it's not "live." I want to have it so while you're dragging the slider, it updates the variable, and not only once you let go. For example: when I'm dragging the slider from 1 to 5, I want the variable to update while I'm dragging, so it will update with 1,2,3,4,5 and not only jump from 1 to 5 once I release the slider.
有可能做这样的事情吗?有什么建议吗?我使用的是 jQuery 滑块插件,但它与触控不兼容,因此失去了它的用途.
Is it possible to do such a thing? Any recommendations? I was using the jQuery slider plugin, but it was not touch compatible, which eliminated its purpose.
提前感谢所有帮助!
编辑 - 我一定解释得不够清楚,我知道如何获取范围滑块的值,我只想从中获得实时"输出.
EDIT - I must not have explained well enough, I know how to get the value of a range slider, I just want to get a "live" output from it.
推荐答案
$("#rangevalue").mousemove(function () {
$("#text").text($("#rangevalue").val())
})
jsFiddle 示例
或者在普通的 JS 中:
Or in plain JS:
var inp = document.getElementById('rangevalue');
inp.addEventListener("mousemove", function () {
document.getElementById('text').innerHTML = this.value;
});
相关文章