Mehrere Slider in Abhängigkeit

hassi_2k7 · 15.11.2011

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:

<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?

im Grunde möchte ichs so haben wie auf:

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

Myhar · 15.11.2011

AW: Mehrere Slider in Abhängigkeit

Das ist einfach nur Mathematik. Du kannst, wie auf der Seite, alle Slider gleichmäßig, oder aber auch nur einen Slider (das wäre am einfachsten) bewegen.
Du musst einfach sicher stellen, dass das Verhältnis der einzelnen Werte gleich bleibt. Am Einfachsten wird sein, wenn du dir die Formel mit einfachen Werten selber herleitest. Also zB Slider1 = 40, Slider2 = 40, Slider3= 20. Wird jetzt Slider4 auf zB 10 bewegt, wie müssen sich die restlichen Slider bewegen, damit das Verhältnis gleich bleibt?
Die genaue Formel weiß ich auch nicht, aber so würde ich daran herangehen.

L. G.

hassi_2k7 · 15.11.2011

AW: Mehrere Slider in Abhängigkeit

Alle Slider gleichmäßig währe schon wünschenswert, aber irgendwie fehlt mir grad das Verständnis dafür :/ bekomms einfach nicht hin. Wie oben schon geschrieben, mit zweien funktionierts kinderleicht, aber sobalds mehr sind bin ich raus

cebito · 15.11.2011

AW: Mehrere Slider in Abhängigkeit

hassi_2k7 schrieb:
Alle Slider gleichmäßig währe schon wünschenswert, aber irgendwie fehlt mir grad das Verständnis dafür :/ bekomms einfach nicht hin.

Alle Slider gleichmäßig ist doch kinderleicht

Wenn ein Slider hinzugefügt oder gelöscht wird rechne 100/Anzahl der (verbliebenen) Slider = prozentualer Anteil jedes einzelnen Sliders. Dann stellst die Slider neu ein.

Edith sagt noch, wenn kein Slider mehr da ist, lässt aber die Rechnung ausfallen... Division durch NULL

hassi_2k7 · 15.11.2011

AW: Mehrere Slider in Abhängigkeit

danke für euer feedback

wie könnte ich das auf meinen oben geposteten code anwenden?

cebito · 15.11.2011

AW: Mehrere Slider in Abhängigkeit

Was ich geschrieben habe bezieht sich auf das Beispiel in deinem Link. Dein obiges Beispiel reagiert auf das Bewegen des Sliders, nicht hinzufügen oder wegnehmen, da muss man anders rangehen. Wenn du möchtest, das sich beim Bewegen eines Sliders alle anderen prozentual gleich nach oben oder unten bewegen, musst du deren Werte wissen und diese prozentual vergrößern/verkleinern. Wenn du morgen früh noch keine Lösung hast, mach ich dir mal ein Beispiel.

cebito · 16.11.2011

AW: Mehrere Slider in Abhängigkeit

Wie versprochen, Beispiel:

HTML:

<!DOCTYPE html>
<html>
<head>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <style type="text/css">
        .slider { margin: 10px; }
    </style>

</head>
<body>

    <div class="slider"></div>
    <div class="slider"></div>
    <div class="slider"></div>
    <div class="slider"></div>

<script>
    var before;

    $('.slider').slider({
        value: 100/$('.slider').length,
        start: function(event, ui) {
            before = $(this).slider('option','value');
        },
        stop: function(event, ui) {
            var wert = $(this).slider('option','value');
            for(var i=0;i<$('.slider').length;i++){
                if(i!=$('.slider').index(this)){
                    var neu = (100 - wert)/((100 - before)/$('.slider').eq(i).slider('option','value'));
                    $('.slider').eq(i).slider('option','value',neu);
                }
            }
        }
    });
</script>

</body>
</html>

Du kannst beliebig viele Slider-div benutzen.

hassi_2k7 · 17.11.2011

AW: Mehrere Slider in Abhängigkeit

hey cebito, sieht schonmal sehr geil aus, danke dir.
aber einen fehler hat der script den ich nicht ganz verstehe...
wenn ich einen beliebigen slider auf maximum ziehe, so dass alle anderen 0 sind, und dann den selben slider wieder unter 100 ziehe, dann kann ich alle anderen slider nicht mehr bewegen, hast du eine idee wie ich das lösen kann?