如何使用范围类型的输入显示当前值答案

【问题标题】：How can I do to display the current value with an input of type range如何使用范围类型的输入显示当前值
【发布时间】：2018-05-24 11:17:58
【问题描述】：

您好，我在用 HTML 编写的代码中有一些类型范围的输入，如下所示：

这是我的输入：

  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">

但我看不到当前值...我该怎么做才能显示它？

非常感谢。

【问题讨论】：

参考这个：-stackoverflow.com/questions/10004723/…
HTML5 input type range show range value的可能重复
为什么这个标签是PHP？

标签： javascript php html

【解决方案1】：

使用输入元素的value property：

function getValue() {

  let value = document.querySelector('#myRange').value

  // here we are logging the value in the console
  console.log(value)

}

<button onclick="getValue()">See value</button>

<input type="range" min="1" max="100" value="50" class="slider" id="myRange">

【讨论】：

【解决方案2】：

这是代码，使用范围输入的 value 属性来获取当前值：

var res =  document.getElementById('currentValue');
    var rangeInput = document.getElementById('myRange');
    res.innerHTML = rangeInput.value;
    
rangeInput.addEventListener('change', function(e) {
    res.innerHTML = e.target.value
})

 <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<div id="currentValue"></div>

【讨论】：

谢谢你，但我把这个var res = document.getElementById('currentValue'); var rangeInput = document.getElementById('myRange'); res.innerHTML = rangeInput.value; rangeInput.addEventListener('change', function(e) { res.innerHTML = e.target.value })
你可以把它放在你的javascript文件中。你有吗？

【解决方案3】：

试试这个：

function updateValue(val) {
          document.getElementById('textInput').value=val; 
 
        }

<input type="range" min="1" max="100" value="50" class="slider" id="myRange" onchange="updateValue(this.value);">
<input type="text" id="textInput" value="">

【讨论】：