JQuery रेंज इनपुट श्रोता

Question

अरे थोड़ा परेशानी jquery और hmtl5 रेंज है। मैं मूल्यों को बदलने की कोशिश कर रहा हूं क्योंकि वे बदल गए हैं लेकिन ईवेंट श्रोता इसे कैप्चर नहीं कर रहा है। वर्तमान में मेरे कोड है:

एचटीएमएल

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

और जे एस है:

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

मैं भी

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

की कोशिश की न तो काम करने के लिए लग रहे है। क्या मुझसे कुछ गलत हो रही है?

Answer 1

The Change घटना पर मेरे लिए सही ढंग से काम कर रहा है: 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); 
});​ 

या आप this की तरह कुछ की कोशिश कर सकते हैं:

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

यहाँ output उदाहरण का उपयोग: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output

Answer 2

का उपयोग कर HTML5 <input type="range"> पर कोई समस्या नहीं प्रतीत होती है।

देखें: http://jsfiddle.net/DerekL/BaEar/33/

Answer 3

मैं अपने अवधि एक आईडी है मान: <span id="slidernumber">...</span> भी चलें मान लें कि आपके कुछ स्लाइडर्स है, और आप एक पाठ परिवर्तन अगर उनमें से किसी चले गए थे देखना चाहता हूँ:

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

इस प्रयास करें:

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

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

अब मान लें कि आपके पास कुछ स्लाइडर्स हैं, लेकिन यदि आप उनमें से कोई एक स्थानांतरित हो गए हैं तो आप एक टेक्स्ट परिवर्तन देखना चाहते हैं। (मैं यह मान क्योंकि रेंज इनपुट ली टैग के अंदर है, और आप इसे एक नाम दे दिया):

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

इस प्रयास करें:

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

यह change आग प्रत्येक input घटना पर घटना।