Escucha de entrada de rango JQuery

Question

Oye, tengo un pequeño problema con jquery y la gama hmtl5. Intento obtener los valores a medida que cambian pero el oyente del evento no los está capturando. Actualmente mi código es:

HTML

html += '<li>Apply Credits: <input type="range" min="0" max="'+credits+'" name="discount_credits" id="discount_credits" /> <span>'+credits+'</span></li>' 

Y la JS es:

$('#discount_credits').mousewheel(function() { 
     alert('it changed!'); 
     alert('new value = ' + $(this).val()); 
    }); 

También he intentado

$('#discount_credits').change(function() { 
      alert('it changed!'); 
      alert('new value = ' + $(this).val()); 
     }); 

Tampoco parece funcionar. ¿Estoy haciendo algo mal?

Answer 1

El en caso de cambio parece estar funcionando correctamente para mí: http://jsfiddle.net/zV3xD/7/

<input type="range" min="0" max="100" name="discount_credits" id="discount_credits" /> 

<span id="newValue" value="0">0</span> 

$('#discount_credits').change(function() { 
    var newValue = this.value;   
    $('#newValue').html(newValue); 
});​ 

o se puede intentar algo así como this:

<form oninput="result.value=parseInt(a.value)"> 
    <input type="range" name="a" value="50" /> = 
    <output name="result">0</output> 
</form> 

Usando el ejemplo output aquí: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output

Answer 2

No parece tener ningún problema en HTML5 <input type="range"> usando change.

Ver: http://jsfiddle.net/DerekL/BaEar/33/

Answer 3

que asuma que su lapso tiene un id: <span id="slidernumber">...</span> Supongamos también que usted tiene un par de deslizadores, y que desea ver un cambio de texto si alguno de ellos fueron trasladados:

<li> 
Apply Credits1: 
<input type="range" min="0" max="100" 
name="discount_credits1" id="discount_credits" 
/> 
</li> 

<li> 
Apply Credits2: 
<input type="range" min="0" max="100" 
name="discount_credits2" id="discount_credits" 
/> 
</li> 

<span id="slidernumber">50</span> 

Prueba esto:

$(document).ready(function(){ 
    $("[type=range]").change(function(){ 
    var newval=$(this).val(); 
    $("#slidernumber").text(newval); 
    }); 
}); 

http://jsfiddle.net/MahshidZeinaly/CgQ5c/

Ahora supongamos que tiene algunos controles deslizantes, pero desea ver un cambio de texto si se movió uno de ellos en particular. (Supongo que debido a que la entrada de rango está dentro de la etiqueta li, y se le dio un nombre):

<li> 
Apply Credits1: 
<input type="range" min="0" max="100" 
name="discount_credits1" id="discount_credits" 
/> 
<span id="slidernumber">50</span> 
</li> 

<li> 
Apply Credits2: 
<input type="range" min="0" max="100" 
name="discount_credits2" id="discount_credits" 
/> 
<span id="slidernumber">50</span> 
</li> 

Prueba esto:

$(document).ready(function(){ 
    $("[type=range]").change(function(){ 
    var newv=$(this).val(); 
    $(this).next().text(newv); 
    }); 
}); 

http://jsfiddle.net/MahshidZeinaly/2pe7P/1/

Answer 4

$('input[type=range]').on('input', function() { 
    $(this).trigger('change'); 
}); 

Esto dispara el change evento en cada evento input.