Jquery स्लाइडर प्लगइन जो "एकाधिक रेंज वाले हैंडल" का समर्थन करता है

Question

मैं एक jquery UI स्लाइडर प्लगिंग की तलाश कर रहा हूं जो एकाधिक श्रेणी वाले हैंडल का समर्थन करता है। मौजूदा Jquery UI स्लाइडर केवल मानों के एक श्रेणी सेट का समर्थन करता है। मैं एक स्लाइडर की तलाश में हूं जिसमें आप बहु श्रेणियां प्राप्त कर सकें। तो एक आंतरिक सीमा या दो श्रेणियों वाली एक श्रृंखला जो ओवरलैप नहीं होती है।

उदाहरण:

आर =

XX = स्लाइडर बार संभाल

= या - = रेंज हैंडल

XXR1 के बीच ------ R1XXXR2 - R2XXXXXXXXX

XXXR1 ---- आर 2 ==== आर 2 ----- आर 1XXXXXX

XXXR1 - आर 2 === आर 2 --- -आर 3 === आर 3 - आर 1XXXX

मुझे नहीं लगता कि वहां एक स्लाइडर है जो ऐसा कर सकता है ?? बस जाने से पहले और एक लिखने से पहले यह सुनिश्चित करना चाहता था।

Answer 1

यहां मैंने यह कैसे किया।

myarr = [ 65, 80, 90 ]; 
$(function() { 
    $("#slider-range").slider({ 
     min: 0, 
     max: 100, 
     values: myarr, 
     slide: function(event, ui) { 
      if (ui.values[0] >= ui.values[1]) { 
       return false; 
      } 
      if (ui.values[1] >= ui.values[2]) { 
       return false; 
      } 
      $(this).find(".range0").css({ "width": ui.values[0] + "%" }); 
      $(this).find(".range1").css({ "left": ui.values[0] + "%", "width": (ui.values[1]-ui.values[0]) + "%" }) ; 
      $(this).find(".range2").css({ "left": ui.values[1] + "%", "width": (ui.values[2]-ui.values[1]) + "%" }) ; 
      $(this).find(".range3").css({ "left": ui.values[2] + "%", "width": (100-ui.values[2]) + "%" }) ; 
     }, 
     create: function(event, ui) { 
       $(this).append('<div class="ui-slider-range ui-widget-header range0" style="left: 0%; width: ' + myarr[0] + '%; background: none repeat scroll 0% 0% #CF1920;"></div>'); 
       $(this).append('<div class="ui-slider-range ui-widget-header range1" style="left: ' + myarr[0] + '%; width: ' + (100-myarr[1]) + '%; background: none repeat scroll 0% 0% #FFE900;"></div>'); 
       $(this).append('<div class="ui-slider-range ui-widget-header range2" style="left: ' + myarr[1] + '%; width: ' + (100-myarr[2]) + '%; background: none repeat scroll 0% 0% #26CF2D;"></div>'); 
       $(this).append('<div class="ui-slider-range ui-widget-header range3" style="left: ' + myarr[2] + '%; width: ' + (100-myarr[2]) + '%; background: none repeat scroll 0% 0% #00BCFF;"></div>'); 
     } 
    }); 
}); 

इम यकीन है कि यह अधिक अनुकूलित किया जा सकता है, लेकिन यह आप सामान्य विचार

Answer 2

मैं सिर्फ Elessar जारी किया है इस सटीक आला भरने के लिए देना चाहिए। colResizable ठीक है, लेकिन यह वास्तव में नौकरी के लिए सही उपकरण नहीं है।