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

我正在尝试从HTML5输入范围滑块获取实时输出到javascript变量。 现在，我正在使用

我工作的方式是做我想做的事，但它不是“活着的”。 我想在你拖动滑块时这样做，它会更新变量，而不仅仅是你松开后。 例如：当我将滑块从1拖动到5时，我想在我拖动时更新变量，因此它将更新为1,2,3,4,5而不仅仅是从1跳到5我释放滑块。

有可能做这样的事吗？ 有什么建议？ 我使用的是jQuery滑块插件，但它没有触摸兼容，这消除了它的目的。

提前感谢您的帮助！

编辑 – 我一定不能解释得很好，我知道如何获得范围滑块的值，我只想从中获得“实时”输出。

Answer 1

 $("#rangevalue").mousemove(function () { $("#text").text($("#rangevalue").val()) }) 

jsFiddle示例

或者在普通JS中：

 var inp = document.getElementById('rangevalue'); inp.addEventListener("mousemove", function () { document.getElementById('text').innerHTML = this.value; }); 

Answer 2

对的，这是可能的。 我们需要做的是使用带有布尔值的.mousedown()和.mouseup()来跟踪我们正在按住鼠标mousedown 。 按住鼠标时将mousedown设置为true并使用不断更新值的setTimeout 。 这样，在拖动滑块时，值会不断更新。 例如：

HTML

 0  

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); } } 

这是一个小提琴

Answer 3

您还可以使用oninput属性。

有关Bugzilla的更多信息

Answer 4

我认为它正在使用您的代码。

的jsfiddle