jQuery Slider - How do I make a group of sliders having max value depending on another Slider?

Question

Here is a hard one I have been trying to get it work. It does work half way however I think the logic is the problem. I will explain the situation and the problem below.

Situation: Want to use a slider controller to select number of Adult,Child,Infant that can occupy inside a room. For example, a Room which can accommodate 3 person, where the user can either use the sliders to select for example, 1 Adult, 2 Child and 0 Infant. However the user should not exceed total number of Adult + Child + Infant more than Room capacity. Few scenario examples are drafted below.

Room A with Capacity for 4 Pax and 1 Adult is required.
Adult/Child/Infant : 1/0/0 is less than 4 is OK
Adult/Child/Infant : 2/1/1 is equal to 4 is Ok
Adult/Child/Infant : 0/2/1 is less than 4 but NO Adult, therefore NOT OK

To use the jQuery UI slider, I have to set 3 sliders for each person type (Adult/Child/Infant) and set the sliders property in such a way that total Values should not exceed Room Capacity.

The sliders should not allow, for example if the room capacity of 4, where the Adult slider value is selected 3 and the child is selected as 1 then the infant slider should not be able to set any value as Adult + Child already filled the room and there is no space for any infant. Or if the Adult is selected the Max value which is 4 then the other two sliders for child and infant should not be able to set any values unless the Adult slider selected value reduces to allow space for child and infant.

So my problem is to code jQuery extended plugin to enable this to work on any selection of elements and setting the properties defining a master slider. This logic may not be the best, thats why I need good ideas and if possible, some function that could enable the sliders to work together as group.

Please suggest me of any good method.

Answer 1

I think the solution would be to use the slide event like this:

$("#mainSlider").slider({
   slide: function(event, ui) { 
             //Insert logic here..
          }
});

And then you the method option :

$("#secondarySlider").slider("max", x);

to set max value of the other sliders calculated by your code.

That's how I would solve the UI part, then you have to calculate the values to set.

You have the documentation here: http://jqueryui.com/demos/slider/