如何防止jQuery UI滑块处理重叠？

Question

使用jQuery-UI 1.7，我已经集成了滑块。一切都很好，但拖动时滑块的手柄相互重叠。我该如何防止这种情况。

你可以在这里看到我的ui滑块

默认视图：

重叠视图：

Answer 1

您可以通过检测slide事件处理程序中的重叠并返回false以防止幻灯片发生来实现此目的。例如：

＆＃13;

＆＃13;

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

＆＃13;

body { padding: 50px; }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13; 请注意，在此示例中，20的值仅根据句柄的宽度进行硬编码。根据您的使用案例，您必须将其更改为任何有意义的内容。

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>