How to make a span display the value of a range as you move it with your mouse?

Asked

Viewed 402 times

4

The function is working, but I want to update the value in <span> as I move the mouse. Someone can help?

function mostrarPorcentagem(novoValor) {
    document.getElementById("exibePercent").innerHTML = novoValor;
}
<input id="percent" type="range" min="-100" max="100" value="0"                                      onchange="mostrarPorcentagem(this.value)"/>
<span id="exibePercent">0</span>

javascript html input range

  • @Renan believe it is related, but the question emphasizes something else

2 answers

3


Utilize oninput calling the function:

With a function:

function mostrarPorcentagem(novoValor) {
  document.getElementById("exibePercent").innerHTML = novoValor;
}
<input id="percent" type="range" oninput="mostrarPorcentagem(this.value)"
        min="-100" max="100" value="0" />
<span id="exibePercent">0</span>

Function-less:

<input id="percent" type="range"
       oninput="getElementById('exibePercent').innerHTML = this.value;" 
       min="-100" max="100" value="0" />
<span id="exibePercent">0</span>

References:

  • 1

    It was perfect, thank you.. I’ll accept it as soon as the system allows.

1

You can do it this way:

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

$range.addEventListener('input', function() {
  $value.textContent = this.value;
});
<input id="percent" type="range" min="-100" max="100" value="0"/>
<span id="exibePercent">0</span>

Browser other questions tagged javascript html input range

You are not signed in. Login or sign up in order to post.