3

Bem, tentei fazer os valores em um input type="range" demostrar em tempo real ao usuário selecionar mais não estou conseguindo. com jquery também é do mesmo modo apenas ao soltar o mouse do botão da classe input type="range" que o valor é demostrado para o usuário final.

1 Resposta 1

6

Dê uma olhada a este exemplo: http://jsfiddle.net/LuKBm/

Na prática não precisa de jQuery e tem duas opções. Ouvir o evento input que muda a cada passo que o mouse mexe, ou ouvir o event mouseup que dispara somente quando o mouse levanta.

O código do exemplo é:

var p = document.getElementById("price"),
    res1 = document.getElementById("resultado1"),
    res2 = document.getElementById("resultado2");

p.addEventListener("input", function () {
    res1.innerHTML = "€" + p.value;
}, false);
p.addEventListener("mouseup", function () {
    res2.innerHTML = "€" + p.value;
}, false);

Porém se quer usar jQuery, nalguns casos pode ter vantagens, entõ o que precisa é:

$('seletorElemento') // um seletor CSS
    .on('mouseup',   // quando ocorrer um mouse up naquele elemento... (pode também usar o "input"
    function(){
        // aqui pode correr o código que precisa, por exemplo mostrar o valor
        $('outroElemento').html(this.value); // no caso de querer mudar o html
    });

Sem os comentários:

$('#price').on('mouseup', function () {
    $('#resultado1').html(this.value);
});

Exemplo

6
  • ótimo exemplo, funciona muito bem. ai vem mais uma dúvida se por exemplo for necessário inserir um valor decimal contendo números com as devidas virgulas para valores financeiros, tem alguma dica? Obrigado.
    – the flash
    12/05/2014 às 12:38
  • @theflash dê uma olhada nesta resposta: pt.stackoverflow.com/a/14729/129
    – Sergio
    12/05/2014 às 13:11
  • @theflash: para usar casas decimais pode usar assim: jsfiddle.net/zmW3T
    – Sergio
    13/05/2014 às 3:42
  • Verifiquei o link enviado @sergio
    – the flash
    13/05/2014 às 17:20
  • 1
    é realmente isto onde estava minha dúvida, obrigado pela ajuda!
    – the flash
    13/05/2014 às 23:40

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 .