How to display input type range value

Question

Well, I have the following code:

<input type="range" name="vol" min="0" max="100">

I would like to know how to show next, the value in real time that is selected, ie the user dragged with the "bar" in the range and next showed the value that had selected.

Thank you first of all.

Answer 1

@Renan has already posted a good solution (and already took my +1), I will leave here a similar alternative, with a few small differences in the syntax and methods used:

<input type="range" name="vol" value="0" min="0" max="100"
    oninput="display.value=value" onchange="display.value=value">
<input type="text" id="display" value="0" readonly>

• The estate oninput calls a JS function, and is usually "Realtime", but is less compatible than using onchange (for example, in IE does not work).
• onchange works in more browsers, but it is not at all that updates in Altime, so we use both simultaneously.

Of curiosity, you can make it work in "two ways". Editing the text field, the slider accompanies. Moving the slider, the text field accompanies:

<input type="range" id="vol" name="vol" value="0" min="0" max="100"
    oninput="display.value=value" onchange="display.value=value">
<input type="text" id="display" value="0"
    oninput="vol.value=value" onchange="vol.value=value">

Answer 2

The event you need to use is the input. Just wait for it to occur and then recover the value of the attribute value of your crease:

var $range = document.querySelector('input'),
    $value = document.querySelector('span');

$range.addEventListener('input', function() {
  $value.textContent = this.value;
});

<input type='range' value='50' max='100'>
<span>50</span>

Answer 3

Show the other answers, but wanted to record this option also where updates the Range only when moving and in real time as in the other example.

For variables you can only use getElementById or querySelector'.

// Quando solta o Range
let $range = document.getElementById("resultado"),
    $value = document.getElementById("input");

function mostrarResultado() {
    $range.innerHTML=$value.value;
}

// Resultado em tempo Real
let $range2 = document.querySelector('#input'),
    $value2 = document.querySelector('#resultadoTempoReal');

$range2.addEventListener('input', function() {
    $value2.textContent = this.value;
});

<form action="index.html" method="post">
  <input type="range" id="input" min="1" max="100" value="33" onchange="mostrarResultado()">
        
  <p>Após mover o Range: <span id="resultado">0</span></p>
  <p>Em tempo real: <span id="resultadoTempoReal">0</span></p>

</form>