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 example

或者在简单的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); 
    }
}

<强> Here is a fiddle

Answer 3

您也可以使用oninput属性。

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

More Information on Bugzilla

Answer 4

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

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

JSFiddle

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

4 个答案: