jQueryのUIスライダの重複を避けるにはどうすればいいですか？

Question

jQuery-UI 1.7を使用して、スライダを統合しました。すべてうまくいきますが、スライダのハンドルはドラッグしながら重なっています。どうすればこれを防ぐことができますか？

あなたはここに私のUIのスライダーを見ることができます

デフォルトビュー：

オーバーラップビュー：

Answer 1

あなたはslideで重複を検出することによって、これを達成することができますイベントハンドラを返し、スライドが発生しないようにfalseを返します。 。例：この例で20の値は単にハンドルの幅に基づいて、ハードコードされていることを

$("#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>

注意。ユースケースごとに、それを意味のあるものに変更する必要があります。

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>