Question

您能否告诉我如何根据第一个滑块#slider2的状态设置第二个滑块max #slider1值？

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

  }
});

Answer 1

这是一个基本的例子。点击此处：http://api.jqueryui.com/slider/#option-max

＆＃13;

$(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'));
});

＆＃13;

p input {
  width: 3em;
}

＆＃13;

<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>

＆＃13;

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

在jQuery UI中基于第一个滑块状态动态设置Slider的最大值

1 个答案: