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.

refer this:-https://stackoverflow.com/questions/10004723/html5-input-type-range-show-range-value — Mr. Roshan, May 24 '18 at 11:19
Possible duplicate of [HTML5 input type range show range value](https://stackoverflow.com/questions/10004723/html5-input-type-range-show-range-value) — Jeff, May 24 '18 at 11:19

score 1 · Answer 1 · answered May 24 '18 at 11:23

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

score 1 · Answer 2 · answered May 24 '18 at 11:24

1

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>

answered May 24 '18 at 11:24

Ihor Lavs

2,315
2
15
26

Thx you but where do I put this `var res = document.getElementById('currentValue'); var rangeInput = document.getElementById('myRange'); res.innerHTML = rangeInput.value; rangeInput.addEventListener('change', function(e) { res.innerHTML = e.target.value })` – Peter Harris May 24 '18 at 12:26
You can put it in your javascript file. Do you have one? – Ihor Lavs May 24 '18 at 12:27

score 0 · Answer 3 · answered May 24 '18 at 11:36

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

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

3 Answers3