如何基于jQuery UI中#slider1的状态动态设置#slider2的最大值？

先贴出你提供的现有代码：

$("#slider1").slider({ 
  value: 100, 
  min: 0, 
  max: 500, 
  step: 50, 
  slide: function(event, ui) { 
    $("#slider-value").html(ui.value); 
  } 
});
$("#slider-value").html($('#slider').slider('value'));
$("#slider2").slider({ 
  value: 100, 
  min: 0, 
  step: 50, 
  slide: function(event, ui) { } 
});

顺便提一句：你代码里$("#slider-value").html($('#slider').slider('value'));这里的选择器是#slider，应该是笔误，改成#slider1才能正确获取slider1的值哦。

接下来是两种实用解决方案：

方案1：初始化时同步slider1的值作为slider2的最大值 #

如果只需要在页面加载时，把slider1的初始值设为slider2的最大值，只需要在初始化slider2时，把max参数设为slider1的当前值即可：

// 先初始化slider1
$("#slider1").slider({ 
  value: 100, 
  min: 0, 
  max: 500, 
  step: 50, 
  slide: function(event, ui) { 
    $("#slider-value").html(ui.value); 
  } 
});

// 修正笔误，获取slider1的值更新显示
$("#slider-value").html($('#slider1').slider('value'));

// 初始化slider2时，将max设为slider1的当前值
$("#slider2").slider({ 
  value: 100, 
  min: 0, 
  max: $('#slider1').slider('value'), // 这里设置最大值为slider1的初始值
  step: 50, 
  slide: function(event, ui) { } 
});

方案2：实时同步slider1的变化到slider2的最大值 #

如果希望用户拖动slider1时，slider2的最大值能实时跟着改变，那就要在slider1的slide和change事件里动态更新slider2的配置。另外建议加上判断：如果slider2当前的值超过了新的最大值，自动把它调整为新的最大值，避免出现值超出范围的异常情况：

$("#slider1").slider({ 
  value: 100, 
  min: 0, 
  max: 500, 
  step: 50, 
  slide: function(event, ui) { 
    $("#slider-value").html(ui.value);
    // 拖动滑块时，实时更新slider2的最大值
    $('#slider2').slider('option', 'max', ui.value);
    // 自动调整slider2的值，避免超出新的最大值
    if ($('#slider2').slider('value') > ui.value) {
      $('#slider2').slider('value', ui.value);
    }
  },
  change: function(event, ui) {
    // 点击滑块轨道改变值时，也同步更新slider2的最大值
    $('#slider2').slider('option', 'max', ui.value);
    if ($('#slider2').slider('value') > ui.value) {
      $('#slider2').slider('value', ui.value);
    }
  }
});

$("#slider-value").html($('#slider1').slider('value'));

// 初始化slider2时，先同步slider1的初始值作为最大值
$("#slider2").slider({ 
  value: 100, 
  min: 0, 
  max: $('#slider1').slider('value'),
  step: 50, 
  slide: function(event, ui) { } 
});

这里用到的$('#slider2').slider('option', 'max', 新值)是jQuery UI滑块提供的动态修改配置项的方法，非常方便。

内容的提问来源于stack exchange，提问作者Mona Coder