Question

您好我的代码用HTML编写了类型范围输入，如下所示：

这是我的意见：

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

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

非常感谢。

Answer 1

使用输入元素的value property：

＆＃13;

function getValue() {

  let value = document.querySelector('#myRange').value

  // here we are logging the value in the console
  console.log(value)

}

＆＃13;

<button onclick="getValue()">See value</button>

<input type="range" min="1" max="100" value="50" class="slider" id="myRange">

＆＃13;

Answer 2

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

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>

Answer 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="">

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

3 个答案: