How to prevent jQuery UI slider handles overlapping?

Question

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:

Answer 1

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.