CODEWITHSUNDEEP
javascriptphphtml
Peter Harris
Peter Harris

Reputation: 93

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

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.

Upvotes: 1

Views: 1263

Answers (3)

Suraj Libi
Suraj Libi

Reputation: 515

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

Upvotes: 0

Ihor Lavs
Ihor Lavs

Reputation: 2463

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>

Upvotes: 1

Ivan
Ivan

Reputation: 40658

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

Upvotes: 1

Related Questions