javascript - HTML 动态更新 slider 输入

标签 javascript html

我以前从未使用过 HTML,我正在创建一个简单的网站作为学术项目的一部分。我正在使用typed.js并让用户选择输出的速度。目前,我正在使用一个下拉框,其中包含与 javascript 代码中使用的值相关的“慢/中/快”选项,但我一直在尝试实现 range input反而。我希望 slider 的标签能够在 slider 更改时自动更新所选数字,但我不知道如何实现这一点。如有任何帮助,我们将不胜感激!

最佳答案

只需使用 oninput 属性调用 JavaScript 函数即可更新标签

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>

关于javascript - HTML 动态更新 slider 输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37146983/

相关文章:

javascript - 检测浏览器支持SVG堆叠

html - 如何在带有或不带有 Bootstrap 的 HTML 中显示字符 ":"前后对齐的单词?

javascript - HTML5 : Canvas Context fillText/strokeText does not draw

html - 在自动填充容器中居中网格元素

javascript - 在显示数组的每个值后向 <div/> 添加属性

javascript - IE图片宽度 chop

javascript - 用户取消离开后如何保持在同一页面而不刷新?

javascript - 从 angularjs Controller 调用时显示 html

javascript - 在uiwebview上按下go按钮时隐藏键盘

JavaScript/jQuery 在两个输入字段都填写时专门更改标签的类