jQuery UI स्लाइडर हैंडल ओवरलैपिंग को कैसे रोकें?

Question

jQuery-UI 1.7 का उपयोग करके, मैंने स्लाइडर एकीकृत किया है। सब कुछ ठीक काम कर रहा है, लेकिन खींचने के दौरान स्लाइडर के हैंडल एक दूसरे को ओवरलैप कर रहे हैं। मेरे द्वारा इसे कैसे रोका जा सकता है।

तुम मेरे ui यहाँ स्लाइडर देख सकते हैं

डिफ़ॉल्ट दृश्य:

पर छा दृश्य:

Answer 1

आप एक slide एक जैसी होने पर पता लगाने के द्वारा ऐसा कर सकते हैं इवेंट हैंडलर और स्लाइड को होने से रोकने के लिए झूठी वापसी । उदाहरण:

$("#slider-range").slider({ 
 
    range: true, 
 
    min: 0, 
 
    max: 500, 
 
    values: [ 75, 300 ], 
 
    slide: function(event, ui) { 
 
     if ((ui.values[ 0 ] + 20) >= ui.values[ 1 ]) { 
 
      return false; 
 
     } 
 
    } 
 
});

body { padding: 50px; }

<link href="http://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" rel="stylesheet"> 
 
<script src="http://code.jquery.com/jquery-1.11.1.js"></script> 
 
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script> 
 
<div id="slider-range"></div>

ध्यान दें कि इस उदाहरण में 20 का मूल्य केवल संभाल की चौड़ाई के आधार पर hardcoded है। आपके उपयोग के मामले में आपको जो कुछ भी समझ में आता है उसे बदलना होगा।

Answer 2

<script> 
    $("#slider-range").slider({ 
     range: true, 
     min: 0, 
     max: 500, 
     values: [ 75, 300 ], 
     slide: function(event, ui) { 
      if ((ui.values[0] + 55) >= ui.values[1]) { 
       return false; 
      } 
     } 
    });​ 
</script>