jQuery HTML5 范围滑块中的实时输出

2022-01-24 00:00:00 input range jquery javascript html

我正在尝试将 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;
});

相关文章