jQuery UI Slider overlap issue solution

I had already posted about How to use jQuery UI Slider and other posts about jQuery UI Slider but this is really interesting. While using jQuery UI Slider for range selection, you may come across a situation where both the slider pointer are at the same value, which means that they overlap. And this is not the ideal behavior that you want for the range.

Below is a simple jQuery code to implement jQuery UI Slider with range selection. Below code specifies the range for slider from 0 to 100 and the initial value for both the silder pointer is 20 and 40 respectively.

//Code Starts $(document).ready(function() {     $("#dvSliderRange1").slider({         range: true,         min: 0,         max: 100,         values: [20, 40],         step: 10,         slide: function(event, ui) {             $("#lblRange1").text(ui.values[0] + " - " + ui.values[1]);         }     });   });​ //Code Ends 

See result below.


To solve this overlap problem, jQuery UI Slider doesn't provide any direct way to handle such situation. But as you can see from the above jQuery code, that I have used "slide" event to update the value in the label whenever any of the pointer moves.

//Code Starts  slide: function(event, ui) {             $("#lblRange1").text(ui.values[0] + " - " + ui.values[1]);      } //Code Ends 

So, we can write our own logic to in this event to check when both the pointers are at same point and if they are, then don't allow. Below jQuery code does the same thing. It compares both the pointers value and if they are equal then it doesn't allow them to slide.

//Code Starts $(document).ready(function() {  $("#dvSliderRange2").slider({         range: true,         min: 0,         max: 100,         values: [20, 40],         step: 10,         slide: function(event, ui) {             if (ui.values[0] == ui.values[1]) {                 return false;             }             $("#lblRange2").text(ui.values[0] + " - " + ui.values[1]);         }     }); });​ //Code Ends 

See result below.



Feel free to contact me for any help related to jQuery, I will gladly help you.