How can I do to display the current value with an input of type range

Question

Hello I have some input of type range on my code written with HTML like this :

this is my input :

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

But I can't see the current value... How can I do to display it ?

Thank you very much.

Answer 1

Use the value property of the input element:

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

Answer 2

Here is the code, use value property of you range input to get the current 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> 

Answer 3

Try this:

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