jQuery中的實時輸出HTML5範圍滑塊

我試圖從HTML5輸入範圍滑塊獲取實時輸出到JavaScript變量。現在，我正在使用<input type="range" id="rangevalue" onchange="arduino()">jQuery中的實時輸出HTML5範圍滑塊

我的工作方式是做我想做的事，但它不是「活的」。我想要在拖動滑塊時使用它，它會更新變量，而不僅僅是一旦放開。例如：當我將滑塊從1拖動到5時，我想要在拖動時更新變量，因此它將使用1,2,3,4,5進行更新，而不是隻從1跳到5次我釋放滑塊。

是否有可能做這樣的事情？任何建議？我使用的是jQuery滑塊插件，但它並不兼容，這消除了它的用途。

感謝您提前提供所有幫助！

編輯 - 我不能很好地解釋，我知道如何獲得範圍滑塊的值，我只是想從它得到一個「實時」輸出。

來源

2014-10-17 Darryl Huffman

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

來源

2014-10-17 17:16:14 j08691

+1哇，不敢相信我忘記了'mousemove'。 – 2014-10-17 17:17:49

@SpencerWieczorek - 我+1了你的方法，這是我原本計劃進行的方式;） – j08691 2014-10-17 17:19:53

只要你點擊並移動滑塊，它就會在鼠標移過滑塊時運行。 – VagueExplanation 2017-06-08 21:31:12

是的，這是可能的。我們需要做的是用布爾值.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

來源

2014-10-17 17:08:18

-1

我認爲它正在與您的代碼。

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

JSFiddle

來源

2014-10-17 17:11:07

的OP想要顯示的值更改爲滑塊被拖動。 – j08691 2014-10-17 17:13:22

值正在改變（在MacBook Pro上的Safari中進行測試） – 2014-10-17 20:08:34

只有在停止之後，才移動滑塊，而不是移動滑塊。 Safari中的 – j08691 2014-10-17 20:16:28

您也可以使用oninput屬性。

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

More Information on Bugzilla

來源

2014-10-17 20:29:40

jQuery中的實時輸出HTML5範圍滑塊

回答

相關問題