Hallo Leute,

ich möchte mehrere (5+) jQuery Slider in Abhängigkeit voneinander haben.
Pro Slider soll man eine Zutat Prozentual variieren können.

Die Summe aller Slider soll 100% ergeben.
(also entweder einer auf 100, zwei auf 50, drei auf 20,30,50 etc.)

Foglenden Ansatz habe ich bereit:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

<script type="text/javascript">   $(function() {               //*** slider 01 ***//     $("#slider_01").slider({       range: "min",       value: 100,       min: 0,       step: 5,       max: 100,       slide: function(event, ui) {           //Korrigiert Slider 2         var newvalue  = 100 - ui.value;         $("#slider_02").slider("value" , [newvalue] )       }     });           //*** slider 02 ***//         $("#slider_02").slider({       range: "min",       value: 0,       min: 0,       step: 5,       max: 100,       slide: function(event, ui) {                 //Korrigiert Slider 1         var newvalue = 100 - ui.value;         $("#slider_01").slider("value" , [newvalue] )               }     });             });     </script>

Mit zwei Slidern ist das also relativ einfach. Wie ich das Ganze aber mit mehreren mache ist mir nach langem Rumprobieren unklar.

Kann mir jemand helfen?

hat niemand eine Idee?
im Grunde möchte ichs so haben wie auf: http://www.proteinmixer.com/mix-erstellen

wenn man dort Zutaten zufügt werden Slider erstellt, deren Summe nie über 100% ist

kann mir nicht vorstellen, dass das so schwer zu realisieren ist :/
bin ich im falschen forum oder wieso hat niemand eine idee?

Schwer ist relativ, besonders kompliziert ist es nicht, wenn man damit leben kann, dass exakte Werte nur schwer möglich sind(da kommen natürlich jenachdem values mit sehr vielen Nachkommastellen heraus, welche irgendwie gerundet werden müssen).

Aber im Endeffekt ist es nur ein wenig Prozentrechnung.

Berechnnung der einzelnen inaktiven Slider:

1. Ausgangswert ∑:
   
   Code :

   1	100-Wert des benutzen Sliders.

2. Zwischenwert %:
   
   Code :

   1	(Wert des inaktiven Sliders*100)/Summe der Werte aller inaktiven Slider

3. Endwert %:
   
   Code :

   1	(Ausgangswert*Zwischenwert)/100

Zur Fehlerkorrekur noch den Rest(Differenz zwischen Ausgangswert und Summe aller zugewiesenen Werte) einem der inaktiven Slider hinzufügen. Das wars.

Demo: http://jsfiddle.net/nFDug/

Falls noch jemand eine Lösung sucht wie er die Summe aller Slider auf maximal 100% begrenzen kann(hatte die Frage hier falsch gelesen und zuerst das umgesetzt):

http://jsfiddle.net/d3LL2/