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

Live output in jQuery HTML5 range slider

本文关键字：实时输出 HTML5 范围 jQuery      更新时间：2023-09-26

我正试图将HTML5输入范围滑块的实时输出转换为javascript变量。现在，我正在使用<input type="range" id="rangevalue" onchange="arduino()">

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

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

感谢您提前提供的帮助！

编辑-我一定解释得不够好，我知道如何获得范围滑块的值，我只想从中获得"实时"输出。

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

jsFiddle示例

或者简单的JS:

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

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

HTML

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

这是一把小提琴

您也可以使用oninput属性。

    <input type="range" min="5" max="10" step="1" 
   oninput="arduino()" onchange="arduino()">

关于Bugzilla 的更多信息

我认为，这个解决方案非常适合这个问题

$("#rangevalue").on("input", function(){ 
  updateSlider() 
});
function updateSlider() {
    // Update the value while the mouse is held down.
    $("#text").text($("#rangevalue").val());
    setTimeout(updateSlider, 50); 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<label id="text">0</label>
<input type="range" value=0 min=0 max=10 id="rangevalue">

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

<input type="range" id="rangevalue" onchange="arduino()">
<p id="t"></p>
    <script>
        function arduino() {
    document.getElementById("t").innerHTML = document.getElementById("rangevalue").value;
}</script>

JSFiddle

相关文章：