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

Here's a tough job that I'm trying to work on. It works half way but I think that logic problem is that I will explain the situation and the problem.

Status: For example, if you want to use a slider controller to select the number of adult, child, infant that is occupied inside the room, A room that can accommodate up to 3 people, where users can either use sliders to select for example, 1 adult, 2 children and 0 infants although the user is more than the total adult + child + child be not Documents below are some examples of scenario beyond the capacity of the room.

  Room A is required for 4 packs and 1 adult capacity. Adult / Child / Infant: Less than 1/0/04 is Adult / Child / Infant: 2/1/1 is equal to 4 Fine Adult / Child / Infant: 0/2/1 Less than 4 but no adult, Therefore, it is not OK  

To use the jQuery UI slider, I have to set 3 sliders for each person type (adult / child / infant) and thus set sliders properties Total values ​​should not be greater than room capacity.

The slider should not be allowed, for example, if the capacity of the room of 4, where the value of the adult slider is selected 3 and the child is chosen as 1, then the baby slider will be given any value Should not be able to set adult + child is already filled up in the room and there is no place for any infant. Or if the maximum value is selected for adult, which is 4 then the second two sliders and infants will not be able to set any price for the child, unless the adult slider selected value reduces the allowance for the child and infant.

So my problem is that jQuery's extended plugin has to enable it to work on any selection of elements and to set the properties that define a master slider. This argument can not be the best, so I need good ideas and if possible, some functions that enable the slider to work together as a group.

Please suggest any good method to me.

I think the solution must be using slide events like this:

  $ ("#sine slider"). Slider ({Slide: Function (Event, UI) {// Insert logic here ..}});  

And then you can choose the option:

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

To set the maximum price for the other slider computed in your code.

In this way I solve the UI portion, then you have to calculate the values ​​to set up.

You have the document here: