Как я могу сделать, чтобы отобразить текущее значение с помощью ввода типа диапазона

Question

Здравствуйте, у меня есть некоторый ввод диапазона типов в моем коде, написанном с использованием HTML, например:

это мой ввод:

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

Но я не вижу текущего значения... Как я могу сделать, чтобы отобразить его?

Большое спасибо.

Answer 1

Вот код, используйте значение свойство вашего диапазона ввода для получения текущего значения:

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 2

Попробуйте это:

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

Answer 3

Используйте свойство value элемента ввода:

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