jQuery UI Sliders - Select overlapping sliders based on dragging direction

Question

I have this simple jQuery UI Slider setup with a range and a two default values that overlap. The entire thing (with a few bells and whistles) can be found in this jsfiddle:

Answer 1

With apologies to Ivo there, whose excellent answer there I'm sure took a lot of effort to create. The problem is that I couldn't apply that solution, because I'm already on 1.8.6, I can't find the 1.8.5 sources anywhere to apply it to, and somehow I just couldn't get the patch to work for 1.8.6, even when I tried adding in the lines manually.

The following is my solution to the problem. It is simpler than Ivo's, but that might be because of differences between the two point releases. The solution is as follows:

1. Splice in an additional variable to keep track of the original values
2. When the conditions are met, (two handles, same value, new value larger than current), to flip an internal variable (_handleIndex) around, causing the maximum handle to be used for reference for the internal _slide function instead of the first.

The diff is as follows:

46a47,48
>       
>       this._originalVal;
310a313,314
>       
>       this._originalVal = this.values();
323a328,331
>       
>       if(this._originalVal[0] === this._originalVal[1] && normValue > this._originalVal[0]){
>           this._handleIndex = 1;
>       }

The first part should be inserted into the initialising area, where the variables are declared, the second into the _mouseCapture function right before the call to _slide, and the last part into the _mouseDrag function, also right before the call to _slide.

Here's a working example with the patch: http://www.jsfiddle.net/HcGXZ/

A copy of the patched jQuery UI 1.8.6 Slider file can be found here: http://dl.dropbox.com/u/1722364/jQuery%20UI%20Slider%20Patch/jquery.ui.slider.patched.js

As always, this patch has not been extensively tested and is not guaranteed to work for all scenarios.