Jquery यूआई: रेंज स्लाइडर। कौन सा स्लाइडर स्थानांतरित हो गया है?

Question

इस डेमो पृष्ठ पर: http://jqueryui.com/demos/slider/#event-change

घटना 'स्लाइड' पुनर्लेखन दो बार में आदानों है:

$("#amount").val("$" + $("#slider-range").slider("values", 0) + 
      " - $" + $("#slider-range").slider("values", 1)); 

मेरी प्रयोजनों मैं जानना चाहता हूँ, के लिए दो स्लाइडर का जो ले जाया जाता है (न्यूनतम या अधिकतम) । मैं इसे कैसे प्राप्त कर सकता हूं?

Answer 1

@Nikoole, वहाँ कोई विशिष्ट विधि है जो संभाल फिसलने है मिल रहा है, लेकिन आप इस चाल

var minSlide = 75, maxSlide = 300; 
$("#slider-range").slider({ 
    range: true, 
    min: 0, 
    max: 500, 
    values: [ 75, 300 ], 
    slide: function(event, ui) { 
     if(minSlide != parseInt(ui.values[0], 10)){ 
      // Do what in minimum handle case 
     } 
     else if(maxSlide != parseInt(ui.values[1], 10)) { 
      // Do what in maximum handle case 
     } 
    }, 
    stop: function(event, ui){ 
     minSlide = parseInt(ui.values[0], 10); 
     maxSlide = parseInt(ui.values[1], 10);    
    } 
}); 

आशा इस में मदद मिलेगी की कोशिश कर सकते।

Answer 2

यहां तक ​​कि मुझे हाल ही में एक ही समस्या का सामना करना पड़ा। एक रेंज स्लाइडर का उपयोग करते समय, आपको यह निर्धारित करने की आवश्यकता है कि कौन सा स्लाइडर (दाएं या बाएं) स्थानांतरित किया गया था। कोई निर्धारित यह निर्धारित करने के लिए कोई तरीका नहीं है, लेकिन हालांकि, ui ऑब्जेक्ट में विशेषताएँ हैं, value और values जो आप यह निर्धारित करने के लिए उपयोग कर सकते हैं कि कौन सा स्लाइडर स्थानांतरित किया गया था। यहाँ समाधान है कि मेरे लिए काम किया है: -

 $("#slider-range").slider({ 
     range: true, 
     min: 75, 
     max: 300, 
     values:[75,300], 
     slide: function(event, ui) { 
     target_name = '' 
     if(ui.values[0] == ui.value) target_name = 'min_price' 
     else if(ui.values[1] == ui.value) target_name = 'max_price' 
     alert(target_name) 
     } 

Answer 3

मैं स्लाइडर एपीआई http://api.jqueryui.com/1.8/slider/#event-create द्वारा परिभाषित घटना बनाने पर ID विशेषता के लिए न्यूनतम और अधिकतम चयनकर्ताओं सेट करके ऐसा हल किया।

  create:function(event, ui) 
     { 
     var handlers = $('.ui-slider-handle'); 
     $.each(handlers, function(i, element) 
     { 
      if(i == 0) 
       $(element).attr('id', 'slider-handler-min'); 
      else 
       $(element).attr('id', 'slider-handler-max'); 
     }); 
     } 

... और फिर मेरे slide स्थिति में वापस मैं ui.handler से बस लाल आईडी विशेषता जो एक बढ़ रहा है पाने के लिए :)

Answer 4

सही स्लाइडर हैंडलर स्लाइडर कंटेनर की अंतिम संतान है, इसलिए, के विपरीत बाएं हैंडलर, दाएं हैंडलर के पास अगला नहीं है:

$('#slider-range').slider({ 
    range: true, 
    min: 0, max: 500, 
    values: [ 75, 300 ], 
    slide: function(event, ui) { 
     if (ui.handle.nextSibling) { 
      // Moving LEFT slider ... 
     } else { 
      // Moving RIGHT slider ... 
     } 
    } 
}); 

Answer 5

स्लाइड ईवेंट दो पैरामीटर लेता है: ईवेंट और ui। ui में हैंडल ऑब्जेक्ट होता है। आप इस तरह के हैंडल की अनुक्रमणिका तक पहुंच और परीक्षण कर सकते हैं:

$("#slider-range").slider({ 
    range: true, 
    min: 0, 
    max: 500, 
    values: [ 75, 300 ], 
    slide: function(event, ui) { 
     var index = $(ui.handle).index(); 
     if (index == 1) { 
      // do stuff for minimum 
     } 
     if (index == 2) { 
      // do stuff for maximum 
     } 
    } 
}); 

यह किसी दिए गए स्लाइडर में हैंडल की किसी भी संख्या के लिए काम करता है। लेकिन ध्यान दें कि इंडेक्स 1 से 0 0 पर शुरू होते हैं।