根据第一个滑块状态动态设置 jQuery UI 中滑块的最大值答案

【问题标题】：Set max value of slider in jQuery UI dynamically based on first slider state根据第一个滑块状态动态设置 jQuery UI 中滑块的最大值
【发布时间】：2018-06-29 06:35:10
【问题描述】：

如何根据第一个滑块 #slider1 的状态设置第二个滑块 #slider2 max 的值？

$("#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) {

  }
});

【问题讨论】：

您希望滑块何时更新？我假设在第一个滑块的slide 期间。

标签： jquery jquery-ui jquery-ui-slider

【解决方案1】：

这是一个基本示例。在此处查看更多信息：http://api.jqueryui.com/slider/#option-max

$(function() {
  $("#slider1").slider({
    value: 100,
    min: 0,
    max: 500,
    step: 50,
    slide: function(event, ui) {
      $("#slider1-value").val(ui.value);
      $("#slider2").slider("option", "max", ui.value * 1.5);
      var max = $("#slider2").slider("option", "max");
      $("#slider2-max").val(max);
    }
  });

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

  $("#slider1-value").val($('#slider1').slider('value'));
  $("#slider2-value").val($('#slider2').slider('value'));
});

p input {
  width: 3em;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>
  <label for="amount">Slider #1 Value:</label>
  <input type="text" id="slider1-value" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider1"></div>
<p>
  <label for="amount">Slider #2 Value:</label>
  <input type="text" id="slider2-value" readonly style="border:0; color:#f6931f; font-weight:bold;">
  <label for="amount">Slider #2 Max:</label>
  <input type="text" id="slider2-max" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider2"></div>

.slider("option", "max") 将获取值，.slider("option", "max", 500) 将设置值。

【讨论】：