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>

HTML动态更新滑块输入

2 个答案: