11

Bom, eu tenho o seguinte código:

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

Gostaria de saber como poderia fazer para mostrar ao lado, o valor em tempo real que está selecionado, ou seja o usuário arrastava com a "barrinha" no range e ao lado mostrava o valor que tinha selecionado.

Obrigado antes de mais.

4 Respostas 4

13

O evento que você precisa utilizar é o input. Basta esperar que ele ocorra e então recupere o valor do atributo value do seu range:

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>

12

O @renan já postou uma boa solução (e ja levou meu +1), vou deixar aqui uma alternativa parecida, com umas pequenas diferenças na sintaxe e nos métodos usados:

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

  • A propriedade oninput chama uma função JS, e costuma ser "realtime", mas é menos compatível do que usar onchange (por exemplo, no IE nao funciona).
  • onchange funciona em mais browsers, mas não é em todos que atualiza em realtime, por isso usamos as duas simultaneamente.


De curiosidade, dá pra fazer a coisa funcionar em "duas vias". Editando o campo texto, o slider acompanha. Mexendo no slider, o campo texto acompanha:

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

5
  • Ninguém dorme !!!
    – MagicHat
    Commented 3/07/2016 às 4:40
  • @MagicHat nem dorme e nem tem vida social kkkk
    – Largato
    Commented 3/07/2016 às 4:40
  • Eu queria fazer com data-attributes, mas fiquei decepcionado por não conseguir usar attr(value) no css. Seria mais elegante algo sem Javascript, mas como a propriedade é relativamente nova temos que dar um desconto. Commented 3/07/2016 às 4:56
  • @renan chego a pensar que devia ser uma opção do próprio html mostrar o valor.
    – Largato
    Commented 3/07/2016 às 4:57
  • 1
    @renan o pior é que attr value funciona pro valor inicial, mas nao atualiza depois que muda.
    – Largato
    Commented 3/07/2016 às 5:06
4

Show as outras respostas, mas queria registrar essa opção também onde atualiza o Range apenas quando move e em tempo real como no outro exemplo.

Nas variáveis pode usar só o 'getElementById' ou '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>

-4

Todas as respostas estão corretas, só queria deixar essa versão em que o valor do input já é carregado com o valor setado, usando uma função no onload da página.

<!DOCTYPE HTML>
<html lang="pt-br">

<head>
  <meta charset="utf-8">
  <title>José Malengo</title>
  <script>
    function myFunction() {
      let x = document.getElementById("number").value;
      document.getElementById("display").value = x;

    }
  </script>
</head>

<body onload="myFunction()">

  <input name="valuey" id="number" type="range" value="10" step="1" min="0" max="30" oninput="display.value=this.value" />
  <input type="text" id="display" readonly ;>


</body>

</html>

1
  • 2
    Desculpe mas não entendi em que essa publicação acrescenta a problemática levantada que obter um valor em tempo real? Commented 28/12/2021 às 1:05

Você deve fazer log-in para responder a esta pergunta.

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