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：我只是第一个滑块的固定动作，不要重复自己。其余的是复制 - 粘贴。