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

Question

我正在尝试将 HTML5 输入范围滑块的实时输出获取到 JavaScript 变量中。现在我正在使用

<input type="range" id="rangevalue" onchange="arduino()">

我让它工作的方式是做我想做的事，但这不是“实时”。 我希望在您拖动滑块时它会更新变量，而不仅仅是在您放开滑块时。例如：当我将滑块从 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

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

这是一把小提琴

Answer 3

您还可以使用 oninput 属性。

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

有关 Bugzilla 的更多信息

Answer 4

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

$("#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">

Answer 5

我将通过在元素上使用

onmousedown

来触发

onmousemove

来启用值跟踪（更新标签），然后使用

onmouseup

禁用跟踪。您可以在此处致电

arduino()

，或者我会为此添加

onchange

。

    var rangevalue = document.getElementById('rangevalue');

    rangevalue.onchange = function()
        {
            document.getElementById('rangevalueLabel').innerHTML = this.value;
            arduino();
        };

    rangevalue.onmousedown = function()
        {
            rangevalue.onmousemove = function()
                {
                    document.getElementById('rangevalueLabel').innerHTML = this.value;
                };
        };

    rangevalue.onmouseup = function()
        {
            rangevalue.onmousemove = null;
        };

Answer 6

我认为它适用于你的代码。

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

JSFiddle