How to prevent jQuery UI slider handles overlapping?

jquery-ui

Solution

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>

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.

Problem

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. You can see my ui slider here Default view: Overlapped view:

Original source