Skip to main content
adicionou 535 caracteres ao conteúdo
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261

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

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.

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

Não prestei atenção e achei que era jQuery a outra resposta por causa do $ nas variáveis....
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261

Como oO @renan já postou uma boa solução com jQuery (e ja levou meu +1), vou deixar aqui uma alternativa parecida, com JS puroumas 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.

Como o @renan já postou uma solução com jQuery (e ja levou meu +1), vou deixar aqui uma alternativa com JS puro:

<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.
  • onchange funciona em mais browsers, mas não é em todos que atualiza em realtime, por isso usamos as duas simultaneamente.

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.
adicionou 137 caracteres ao conteúdo
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261

Como o @renan já postou uma solução com jQuery (e ja levou meu +1), vou deixar aqui uma alternativa com JS puro:

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

Esta é uma versão parecida, com onchange:

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

A maior diferença desta segunda é que a atualização só ocorre quando você "solta" o slider.

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

Como o @renan já postou uma solução com jQuery (e ja levou meu +1), vou deixar aqui uma alternativa com JS puro:

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

Esta é uma versão parecida, com onchange:

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

A maior diferença desta segunda é que a atualização só ocorre quando você "solta" o slider.

Como o @renan já postou uma solução com jQuery (e ja levou meu +1), vou deixar aqui uma alternativa com JS puro:

<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.
  • onchange funciona em mais browsers, mas não é em todos que atualiza em realtime, por isso usamos as duas simultaneamente.
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261
Carregando