Pergunta sobre range, javascript, html5, jquery – Ouvinte de entrada do intervalo JQuery

19

Ei tendo um pequeno problema jquery e o intervalo hmtl5. Eu estou tentando obter os valores como eles mudaram, mas o ouvinte de evento não está capturando isso. Atualmente meu código é:

HTML

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

E o JS é:

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

Eu também tentei

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

Nem parece funcionar. Estou fazendo algo errado?

O manipulador de eventos é adicionado depois que a entrada do intervalo é injetada no DOM? Andreas

Sua resposta

5   a resposta
1

O evento on change parece estar funcionando corretamente para mim:http://jsfiddle.net/zV3xD/7/

<code><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);
});​
</code>

Ou você pode tentar algo comoisto:

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

Usando ooutput exemplo aqui:https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/output

Oi @CarolineSchnapp - Eu atualizei meu exemplo para mostrar outra maneira de abordar essa questão. Se não for suficiente, por favor, deixe-me saber e podemos descobrir algo que vai. Chase
Apenas atualiza o #newValue quando eu solto o botão do controle deslizante, na chave. No Google Chrome versão 34.0.1847.116 usando jQuery 2.0.3. Caroline Schnapp
4

Eu suponho que seu período tenha um id:<span id="slidernumber">...</span> Vamos supor também que você tem alguns controles deslizantes e deseja ver uma alteração de texto se algum deles foi movido:

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

Tente isto:

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

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

Agora vamos supor que você tem alguns sliders, mas você quer ver uma mudança de texto se um deles foi movido em particular. (Eu suponho que porque o intervalo de entrada está dentro da tag li e você deu um nome):

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

Tente isto:

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

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

12

<input type="range"> usandochange.

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

no Chrome, pelo menos, a anexação do manipulador ao evento "input" é acionada mesmo ao passar o mouse. para o evento 'change', este não é o caso. Então eu optei por 'mudar', como pairando não é considerado entrada no meu caso. o efeito de pairar pode ser problemático se seu manipulador disparar manipulação dom ou chamadas ajax. Luke W
Ele só atualiza o valor de span quando eu solto o botão do controle deslizante, na chave. No Google Chrome versão 34.0.1847.116 usando jQuery 2.0.3. Caroline Schnapp
@CarolineSchnapp - Corrigido. Derek 朕會功夫
pode não ser grande coisa, mas também é acionado quando você passa o controle deslizante com o mouse. caso contrário, ótima solução! Willi Mentzel
22
<code>$('input[type=range]').on('input', function () {
    $(this).trigger('change');
});
</code>

Isso dispara ochange evento em todos osinput evento.

0

Vários teste e bug corrigidos!

<code>$('input[name=form_range]').change('mousestop',function () {

});
</code>

Perguntas relacionadas