javascript - jQuery UI slider - prevent multiple handles from overlapping -

I have this slider of a slider with four sliders when you drag them, then refuse to cross each other What would be the easiest way? I tried to compare their situation. While returning the left value and false, they are equal to the adjacent handles, but it kills it completely. Ideally, you will not be able to pull it short by the width of the selected dropdown between each handle, but maybe I can find it there. If I can stop them from crossing.

slider ({minimum: 0, maximum: 1440, phase: 15, range: wrong, value: [180, 435, 1080, 1320], create: function (event, UI) {$ .e.e (initial value, function (i, v) {updateValue ({value: v, handle: $ ('.ui-slider-handle'). Eq (i)});});}, slide: Function (Event, UI) {var Handindex = $ (ui.handle). Index (); Update Value (UI); Detective ();}});

You can use the index code> $ ('A', event.target). Index (ui.handle) .

From there, you can use the next / previous handle values ​​and compare that the value of the current handle is between them. If so, then return false and prevent handling from overlapping. for.

In the example given below, 25 value padding has been made difficult to prevent from using overlapping usage.

  slide: function (event, UI) {var handleIndex = $ ('a', event.target). Index (ui.handle), curr = ui.values ​​[handleIndex], next = Ui.values ​​[handleIndex + 1] - 25, prev = ui.values ​​[handleIndex - 1] + 25; If (curr> next || curr & lt; prev) {return false; } Update Value (ui); PositionSelects (); }