jQuery Forum

Hi there,

I have a small problem using multiple vertical rangesliders in a specific way. I'll try to explain what i want to do , how i wanted to achieve it and consequentially how i ended up receiving this error.

I have three vertical range-sliders in a container-div. All of the same height and position (layered on top of each other) but with different initial selected ranges. What im trying to do is to avoid any overlapping of all the selected ranges of those three sliders.

Html-Code

1. <div id="container">
2.       <div id="slider1"></div>
3.       <div id="slider2"></div>
4.       <div id="slider3"></div>
5. </div>

The JQuery-Code is capsuled in a plugin which is included in my php-Page and is invoked in a document-ready-function.


So for example If i try to change the range of the second slider the lower handle should not go further than the upper handle of range 3.

I hope this illustrates what im trying to achieve. :)

I wanted to do this restriction in the respective slide-callback like that.

1. slide: function( event, ui )
2. {
3.       var prev = $(this).prev();
4.       var next = $(this).next();
5.                  
6.       if(prev!=null)
7.       {
8.             var values = prev.slider( "option", "values" );
9.             var gate = values[0] - gap;
10.             if(ui.values[1] >=gate) return false;
11.       }
12.       if(next!=null)
13.       {
14.             var values = next.slider( "option", "values" );
15.             var gate = values[1] + gap;
16.             if(ui.values[0] <=gate) return false;
17.       }
18. }

The variable gap is just an arbitrary chosen constant.

When i do it this way i get the error mentioned in the topic. As i want to find out the values of slider 1 or 3 when editing slider 2.

Its strange because the sliders have been initialized, otherwise they would not be shown, or is that assumption somehow wrong?

Could anybody point me in the right direction?

Thx in Advance