HTML動態更新滑塊輸入

Question

我以前從未使用HTML和我創建一個簡單的網站作爲一個學術項目的一部分。我正在使用typed.js並讓用戶選擇輸出的速度。目前我正在使用一個下拉框，其中包含與JavaScript代碼中使用的值相關的「慢/中/快」選項，但我一直試圖實現range input。我希望滑塊的標籤可以在滑塊更改時自動更新選定的數字，但我堅持如何實現這一點。任何幫助表示讚賞！

Answer 1

只需使用oninput屬性調用javascript函數更新label。

HTML

<label id="demo"></label><br> 
<input oninput="myFunction()" type="range" id="myRange" value="90"> 

JS

<script> 
function myFunction() { 
    var x = document.getElementById("myRange").value; 
    document.getElementById("demo").innerHTML = x; 
} 
</script> 

Answer 2

這裏是你在找什麼：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input oninput="rangeFunction()" type="range" id="range" value="20" min="0" max="360"> 
 

 
<label id="result"></label> 
 
<script>  
 
window.onload = function() {rangeFunction()}; //display default range value in #result 
 
    
 
function rangeFunction() { 
 
    var x = document.getElementById("range").value; //get current range value 
 
    document.getElementById("result").innerHTML = x; // display current range value in #result 
 
} 
 
</script>