4

A função está funcionando, porém quero fazer atualizar o valor no <span> a medida que mexo com o mouse. Alguém pode ajudar?

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>

1
  • @Renan acredito que seja relacionada, porém a pergunta faz ênfase em outra coisa Commented 13/01/2017 às 15:53

2 Respostas 2

3

Utilize oninput chamando a função:

Com uma função:

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>


Sem função:

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

Referencias:

1
  • 1
    Ficou perfeito, obrigado.. Aceitarei assim que o sistema permitir. Commented 13/01/2017 às 15:57
1

Você pode fazer desta forma:

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>

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .