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

Live output in jQuery HTML5 range slider(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;
});

这篇关于jQuery HTML5 范围滑块中的实时输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！