jQuery-UI 1.7を使用して、スライダを統合しました。すべてうまくいきますが、スライダのハンドルはドラッグしながら重なっています。どうすればこれを防ぐことができますか?jQueryのUIスライダの重複を避けるにはどうすればいいですか?
あなたはここに私のUIのスライダーを見ることができます
デフォルトビュー:
オーバーラップビュー:
jQuery-UI 1.7を使用して、スライダを統合しました。すべてうまくいきますが、スライダのハンドルはドラッグしながら重なっています。どうすればこれを防ぐことができますか?jQueryのUIスライダの重複を避けるにはどうすればいいですか?
あなたはここに私のUIのスライダーを見ることができます
デフォルトビュー:
オーバーラップビュー:
あなたは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>
<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>
ありがとうございました。スライダをドラッグすると、スライダが重なり合っています。それは私の質問です。 – Hearaman
Gotcha、私はこれに対処するために私の答えを更新しました。 –