Range issue with ui-slider

Question

I'm trying to set up a range with a slider. I would prefer if both cursors did not overlap in the same value. In other words, how do I get the sliders to freeze and stay put when the minimum value slider and the maximum value slider come next to each other. Any ideas? Thank you in advance.

Answer 1

I was searching for a solution to this when doing custom-styled slider yesterday.

Nothing worked from what I found, then I came up with an easy one myself:

1.Put the slider into container div with left and right padding

<div class="slider-container">
  <div class="slider-main ..."></div>
</div>

2.Set the styles of

-container (left and right padding to half slider-handle width) slider

-handle (left-margin to minus half of its width)

Something like this (im writing from memory)

<style>
  .slider-container {
    padding-left: 8px;
    padding-right: 8px;
  }
  .slider-handle {
    width: 16px;
    margin-left: -8px;
  }
</style>

You should also remove styling from slider-main and move it from there to slider-container

Answer 2

Returning false from the slide function when they're about to collide seems to work: http://jsbin.com/eyoge3/3

Code from the jsbin:

slide: function(event, ui) {
    var oldMin = $("#slider").slider("values", 0);
    var oldMax = $("#slider").slider("values", 1);
    var newMin = ui.values[0];
    var newMax = ui.values[1];

    if( oldMin != newMin && newMin == oldMax )
      return false;
    else if( oldMax != newMax && newMax == oldMin )
      return false;
}

Answer 3

jQuery UI slider range extension

I needed something similar so I've written an extension over existing jQuery UI slider plugin/widget. These are additional options that this extension supports:

• minimum and maximum range size - minimum range size is exactly what you're after
• limiting lower and upper range boundary values - this sets the maximum value for the lower range boundary handle and minimum value for the upper range boundary handle
• automatic range sliding - this allows to drag (any) handle over the limit of maximum range size which in turn drags the other handle along.

You can get the code on my blog (it gets updated so I'm not publishing it here directly).