Real-time values in the input type="range" class

Question

Well, I tried to do the values in one input type="range" demonstrate in real time to the user to select more I’m not getting. with jquery is also the same just by dropping the mouse from the class button input type="range" that the value is demonstrated to the end user.

Answer 1

Take a look at this example: http://jsfiddle.net/LuKBm/

In practice you don’t need jQuery and you have two options. Listen to the event input that changes with each step the mouse moves, or listen to Event mouseup that shoots only when mouse raises.

The code of the example is:

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

But if you want to use jQuery, in some cases it can have advantages, so what you need is:

$('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
    });

Without the comments:

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

Example