jquery範圍滑塊：將滑塊1的最大值設置爲滑塊最小值2

Question

我有一個包含4個發送範圍的jQuery滑塊的頁面。我希望滑塊以下列方式相互更新：爲滑塊＃1的最大值選擇的值自動變爲滑塊＃2的最小值，滑塊＃2的最大值自動變爲滑塊＃3的最小值，依此類推。以下是我迄今爲止：

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); 
     } 

    }); 
}); 

我也想滑1分鐘值鎖定爲0

我想另一個問題是，如果這是再好的如何做到這一點？

Answer 1

這裏是工作提琴：

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

一些有用的提示：

• 如果你想解決的jQuery UI的範圍滑塊的最小值，標誌着它的「範圍」屬性作爲「分鐘」。每當用戶停止滑動
• 您可以通過 「選項」 和 「值」 參數更改滑塊的值

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

• 停止事件被觸發

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

• 您可以通過「分」參數更改滑塊的最低

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

P.S：我只是第一個滑塊的固定動作，不要重複自己。其餘的是複製 - 粘貼。