如何在HTML5范围输入类型旁边显示值？

Question

好的，我正在尝试使用范围输入类型

Times: <input type="range" name ="times"><br>

但是我希望将值打印在它旁边，我该怎么做？

像

------- * - 7

* --------- 1

Answer 1

附加onChange事件 并在事件处理函数中，您可以选择的值   并将其作为innerHtml写入控制器旁边的范围

<input id="mine" type="range" min="-100" max="100" value="0" step="10" onChange="change();"> <span id="result"></span>

<script>
var result = document.getElementById("result");
var mine = document.getElementById("mine");
function change(){
    result.innerText = mine.value;
}
</script>

Answer 2

function showCount(){
    var count = document.getElementById("slider").value;
    console.log("meter position : "+count);
}

<input type="range" value="0" id="slider" step="1" min="0" max="15" onchange="showCount()"/>

当您移动滑块enter code here或放置并发出警报时，这将给出计数。