In this article we will tell you how to prevent the overlapping of two sliders in jQueryUI when you are using the multiple sliders functionality of jQueryUI. Although, there is no such directive which can help you prevent the overlap between two sliders. Instead, you can prevent this slider overlap by using a simple check.

jQueryUI

Here is how you do it:

While declaring your slider in the javascripts, you have to include a piece of code that detects if the two sliders are overlapping. This can be done by simply checking and comparing the current values of the two slider handles. Please check this code snippet given below:

 

        $( "#range" ).slider({
            range: true,
            min: 0,
            max: 100,
            values: [ 50, 60 ],
            step: 10,
            slide: function( event, ui ) {
                if (ui.values[0] == ui.values[1]) { /*checks for the values and compares*/
                    return false;
                }
            }

 

You can also check a demo for the "prevention of jQueryUI Slider Overlap" on this page: click here. You can also check the source code of that page in order to get a better understanding of how this thing functions.