jQuery-UI 1.7を使用して、スライダーを統合しました。すべて正常に動作していますが、ドラッグ中にスライダーのハンドルが重なり合っています。どうすればこれを防ぐことができますか。
ここに私のUIスライダーが表示されます
デフォルトビュー:
重複したビュー:
jQuery-UI 1.7を使用して、スライダーを統合しました。すべて正常に動作していますが、ドラッグ中にスライダーのハンドルが重なり合っています。どうすればこれを防ぐことができますか。
ここに私のUIスライダーが表示されます
デフォルトビュー:
重複したビュー:
これを実現するには、イベントハンドラーでオーバーラップを検出し、slide
falseを返して、スライドが発生しないようにします。例:
$( "#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
ハンドルの幅に基づいて単純にハードコーディングされていることに注意してください。ユースケースごとに、それを意味のあるものに変更する必要があります。
<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>