jQuery select box maximum in select box group

Question

Good morning,

I need a "Range" picker for jQuery. Is there one in jQuery or jQuery-UI?

For example:

I have 3 select boxes with a sum of 2. In one select box of the select box group, i select the amount 1. Then the other select boxes in that group have only one value "1".

The second (right) example: I have 4 Select Boxes with a sum of 4. First i select the Amount "2" in one select box of that select box group. Then the other boxes have only 1 and 2 as choice. I select 2? Then the others are empty "0" or i select 1, then i could select +1 at the others.

Like this:

<selectgroup maximum="2">
    <select name="first" />
    <select name"second" />
    <select name"third" />
</selectgroup>

or that (right example):

<selectgroup maximum="4">
    <select name="first" />
    <select name"second" />
    <select name"third" />
    <select name"fourth" />
</selectgroup>

they generate the options self.

Its like this one => http://www.humblebundle.com/weekly <=, but with groups and with select boxes.

Thank you in Advance!

Answer 1

You can create sliders using the jQuery UI slider, documentation found at http://jqueryui.com/slider/ .

You can then bind to the .change event, for which the documentation is found at http://api.jqueryui.com/slider/#event-change .

In that callback you can use the .value method to adjust the value of the other sliders dynamically, documentation found at http://api.jqueryui.com/slider/#method-value .

Let me know if that is helpful, and if that makes sense :)