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>