HTML动态更新滑块输入

HTML Dynamically Updating Slider Input

本文关键字：输入 更新 动态 HTML      更新时间：2023-09-26

我以前从未使用过HTML，我正在创建一个简单的网站，作为学术项目的一部分。我使用的是typed.js，让用户选择输出的速度。目前，我使用的是一个下拉框，其中包含与javascript代码中使用的值相关的"慢速/中等/快速"选项，但我一直在尝试实现范围输入。我想为滑块添加一个标签，以便在滑块更改时自动更新选定的数字，但我一直纠结于如何实现这一点。感谢您的帮助！

只需使用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>

以下是您要查找的内容：

<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>

相关文章：