jquery के साथ परिवर्तन के दौरान इनपुट रेंज कैसे प्राप्त करें?

Question

मैं क्रोम 41 में jQuery 2.1 का उपयोग कर रहा हूं। मुझे इनपुट स्लाइडर से वैल्यू प्राप्त करने की आवश्यकता है क्योंकि यह बदलता है; हालांकि, जब मैं jquery के साथ परिवर्तन ईवेंट का उपयोग करता हूं, तो माउस को जारी किए जाने के बाद ही मुझे स्लाइडर से मूल्य मिलता है, मूसडाउन और ड्रैग के दौरान नहीं।

यह छोटा सा उदाहरण समस्या दिखाता है:

<input type="range" id="slider" value="0.5" min="0.0" max="1.0" step="0.01" /> 

<br /> 

<span id="slider_value">Nothing yet.</span> 

<script> 
$(document).on('change', '#slider', function() { 
    $('#slider_value').html($(this).val()); 
}); 
</script> 

मुझे लगता है कि मैं माउस ऊपर/नीचे की घटनाओं पर एक बूलियन करना और फिर MouseMove घटनाओं पर मूल्यों हो रही द्वारा एक फिक्स के साथ आ सकता है। क्या कोई क्लीनर समाधान है?

Answer 1

आधुनिक ब्राउज़रों में आप input घटना का उपयोग कर सकते हैं:

$(document).on('input', '#slider', function() { 
    $('#slider_value').html($(this).val()); 
}); 

ध्यान दें कि आईई < 9 इसका समर्थन नहीं करता लेकिन न तो इसे समर्थन करता range इनपुट

संदर्भ: MDN input - Event

DEMO

Answer 2

आप change/input घटनाओं के लिए सुनो सकता:

Updated Example

डोम input event निकाल दिया जाता है तुल्यकालिक जब एक <input> या <textarea> तत्व का मान बदल जाता है।

change event<input>, <select>, और <textarea> तत्वों के लिए निकाल दिया जाता है जब तत्व का मान में कोई परिवर्तन उपयोगकर्ता द्वारा प्रतिबद्ध है। input event के विपरीत, प्रत्येक ईवेंट के लिए किसी तत्व के मान में परिवर्तन ईवेंट जरूरी नहीं है।

$(document).on('input change', '#slider', function() { 
 
    $('#slider_value').html($(this).val()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="range" id="slider" value="0.5" min="0.0" max="1.0" step="0.01" /> 
 
<br /> 
 
<span id="slider_value"></span>

मुझे यकीन है कि अकेले input event को सुन भी पर्याप्त होगा हूँ।

Answer 3

इसके अलावा, यदि आप स्लाइडर के साथ जाने के लिए इनपुट रेंज वर्तमान मान चाहते हैं, तो आप this solution आज़मा सकते हैं।