Curseur de plage jquery: définissez max du curseur 1 à min du curseur 2

Question

J'ai une page avec 4 curseurs jQuery qui ont envoyé des plages. Je souhaite que les curseurs se mettent à jour de la manière suivante: la valeur sélectionnée pour le maximum du curseur n ° 1 devient automatiquement min pour le curseur n ° 2, le maximum du curseur n ° 2 devient automatiquement le min pour le curseur n ° 3 et ainsi de suite. voici ce que j'ai jusqu'à présent:

http://jsfiddle.net/8xVWY/1/

$(function() { 
    $("#slider-range").slider({ 
     range: true, 
     min: 0, 
     max: 10000000, 
     step: 100000, 
     values: [ 0, 1000000 ], 
     slide: function(event, ui) { 
      $("#amount").val("$" + addCommas(ui.values[ 0 ].toFixed(2)) + " - $" + addCommas(ui.values[ 1 ].toFixed(2))); 
      $("#amount_high").val(ui.values[ 0 ].toFixed(2)); 
      $("#amount_low").val(ui.values[ 1 ].toFixed(2) - .01); 
      var high1 = ui.values[ 1 ]; 

     } 
     }); 
$("#slider-range2").slider({ 
     range: true, 
     min: 0, 
     max: 10000000, 
     step: 100000, 
     values: [ 0, 1000000 ], 
     slide: function(event, ui) { 
      $("#amount2").val("$" + addCommas(ui.values[ 0 ].toFixed(2)) + " - $" + addCommas(ui.values[ 1 ].toFixed(2))); 
      $("#amount_high2").val(ui.values[ 0 ].toFixed(2)); 
      $("#amount_low2").val(ui.values[ 1 ].toFixed(2) - .01); 
     } 
     }); 
$("#slider-range3").slider({ 
     range: true, 
     min: 0, 
     max: 10000000, 
     step: 100000, 
     values: [ 0, 1000000 ], 
     slide: function(event, ui) { 
      $("#amount3").val("$" + addCommas(ui.values[ 0 ].toFixed(2)) + " - $" + addCommas(ui.values[ 1 ].toFixed(2))); 
      $("#amount_high3").val(ui.values[ 0 ].toFixed(2)); 
      $("#amount_low3").val(ui.values[ 1 ].toFixed(2) - .01); 
     } 
     }); 
$("#slider-range4").slider({ 
     range: true, 
     min: 0, 
     max: 10000000, 
     step: 100000, 
     values: [ 0, 1000000 ], 
     slide: function(event, ui) { 
      $("#amount4").val("$" + addCommas(ui.values[ 0 ].toFixed(2)) + " - $" + addCommas(ui.values[ 1 ].toFixed(2))); 
      $("#amount_high4").val(ui.values[ 0 ].toFixed(2)); 
      $("#amount_low4").val(ui.values[ 1 ].toFixed(2) - .01); 
     } 

    }); 
}); 

Je voudrais aussi verrouiller la valeur min du curseur 1 à 0.

Je suppose une autre question est de savoir si cela est encore le meilleur façon de le faire?

Answer 1

Voici le violon de travail:

http://jsfiddle.net/8xVWY/13/

Quelques conseils utiles:

• Si vous voulez fixer au moins un curseur de plage de jQuery UI, marquer son attribut « plage » comme "min".

$("#slider-range-min").slider({ 
      range: "min", 
      value: 37, 
      min: 1, 
      max: 100 
     }); 

• événement d'arrêt est déclenché chaque fois glissement arrête utilisateur
• Vous pouvez modifier la valeur d'un curseur par "option" et les paramètres "valeurs"

//getter 
var value = $(".selector").slider("option", "value"); 
//setter 
$(".selector").slider("option", "value", 37); 

• Vous pouvez modifier au moins un curseur par le paramètre "min"

//getter 
var min = $(".selector").slider("option", "min"); 
//setter 
$(".selector").slider("option", "min", -7); 

P.S: Je ne l'action fixe du premier curseur, ne pas me reproduire. Le reste est un copier-coller.