How to make a span display the value of a range as it moves it with the mouse? [duplicate]

Navigation
4

The function is working, however I want to update the value in <span> as I move with the mouse. Can anyone 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>
    
asked by anonymous 13.01.2017 / 16:44

2 answers

3

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

No function: 

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

References:

13.01.2017 / 16:54
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>
    
13.01.2017 / 16:53
Logistic regression with non-binary variable Good practices for changing $ scope variables