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

【问题标题】：Live output in jQuery HTML5 range sliderjQuery HTML5 范围滑块中的实时输出
【发布时间】：2014-12-13 07:13:37
【问题描述】：

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

我让它工作的方式是做我想做的事，但它不是“活的”。我想要它，所以当你拖动滑块时，它会更新变量，而不仅仅是在你放手时。例如：当我将滑块从 1 拖动到 5 时，我希望变量在拖动时更新，因此它将更新为 1,2,3,4,5 而不仅仅是从 1 跳到 5 一次我松开滑块。

有可能做这样的事情吗？有什么建议吗？我使用的是 jQuery 滑块插件，但它与触控不兼容，因此失去了它的用途。

提前感谢所有帮助！

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

【问题讨论】：

标签： javascript jquery html input range

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

你也可以使用 oninput 属性。

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

More Information on Bugzilla

【讨论】：

【解决方案3】：

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

【讨论】：

@SpencerWieczorek - 我为你的方法 +1 了，这是我最初计划的方式；)
只要鼠标移到滑块上就会运行——不仅仅是当你点击和移动滑块时。
@VagueExplanation 任何时候鼠标移到滑块上？你是什么意思，在什么浏览器中？
我在 Safari 中尝试过。您可以在函数内的代码运行时随时登录控制台进行测试。虽然它说的很有意义 - 这是一个 mousemove 事件，当将鼠标光标移动到 id 为“rangevalue”的元素上时发生。它无需单击即可运行。您只需将光标移到元素上即可。

【解决方案4】：

是的，这是可能的。我们需要做的是使用带有布尔值的.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

【讨论】：

【解决方案5】：

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

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

JSFiddle

【讨论】：

OP想要显示随着滑块被拖动而改变的值。
值在变化（在 MacBook Pro 上的 Safari 中测试）
不是在你移动滑块的时候它不是，只有在你停止之后。
您使用的是哪种浏览器+操作系统？