如何防止jQuery UI滑块句柄重叠? [英] How to prevent jQuery UI slider handles overlapping?

问题描述

我使用jQuery-UI 1.7集成了滑块.一切正常，但是在拖动时滑块的手柄相互重叠.我如何防止这种情况.

Using jQuery-UI 1.7, I have integrated slider. Everything is working fine, But slider's handles are overlapping each other while dragging. How can i prevent this.

您可以在此处看到我的ui滑块

You can see my ui slider here

默认视图:

重叠视图:

推荐答案

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

You can accomplish this by detecting an overlap in a slide event handler and returning false to prevent the slide from occurring. Example:

$( "#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的值只是根据句柄的宽度进行了硬编码.根据您的用例，您必须将其更改为有意义的任何内容.

Note that in this example the value of 20 is simply hardcoded based on the width of the handle. Per your use case you'll have to change that to whatever makes sense.

这篇关于如何防止jQuery UI滑块句柄重叠?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！