javascript - 根据第一个滑块设置 JQuery UI 的第二个滑块值

Question

我有两个滑块。我正在尝试根据第一个滑块更改来更改第二个滑块值。我不确定是否应该使用 if 条件。有一组我想要实现的值。例如，如果第一个滑块值是

$6000.00, $6500.00, $7000.00, $7500.00, $8000.00, $8500.00, $9000.00, $9500.00, $10000.00

第二个滑块值是 -

$411000.00, $416500.00, $421000.00, $426500.00, $431000.00, $436000.00, $441000.00, $446000.00, $450500.00

如果选择或设置第一个滑块范围为 $6000.00，则第二个滑块应更改为 $411000.00，如果第一个滑块设置为 $6500.00，则第二个滑块应设置为 $416500.00，以此类推。

我正在尝试的代码是-

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <script>
   $(function() {
    $("#slider1").slider({
    value: 6000,
    min: 6000,
    max: 20000,
    step: 500,
   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: 411000,
   min: 411000,
   max: 544000,
   slide: function(event, ui) {
     $("#slider2-value").val(ui.value);
   }
   });
   
     $("#slider1-value").val($('#slider1').slider('value'));
     $("#slider2-value").val($('#slider2').slider('value'));
   });
</script>

<div class="sliders-div">
   <label for="deposit-amount">Deposit Amount:</label>
   <input type="text" id="slider1-value" readonly>
   <div id="slider1"></div>
   <label for="package-price">Package Price:</label>
   <input type="text" id="slider2-max" readonly>
   <div id="slider2"></div>
</div>

任何帮助将不胜感激。

标签： javascriptphpjquery

Answer 1

You are setting the max value in the option and the value of the slider, but the min value of the slider 2 remains the same at 411000 which is higher than your max value.

The following snippet is a working example, however the calculation of using the slider 1 value * 1.5 is not equal to the max value you want to set for slider 2. So I suggest you revise the calculation and make sure that when you change the option, the min and max value of the slider make sense.

$(function() {
  $("#slider1").slider({
    value: 6000,
    min: 6000,
    max: 20000,
    step: 500,
    slide: function(event, ui) {
      $("#slider1-value").val(ui.value);
      $("#slider2").slider("option", "min", ui.value);
      $("#slider2").slider("option", "max", ui.value * 1.5);
      var max = $("#slider2").slider("option", "max");
      $("#slider2-max").val(max);
    }
  });
   
   $("#slider2").slider({
     value: 411000,
     min: 411000,
     max: 544000,
     slide: function(event, ui) {
       $("#slider2-value").val(ui.value);
     }
   });
   
   $("#slider1-value").val($('#slider1').slider('value'));
   $("#slider2-value").val($('#slider2').slider('value'));
 });

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="sliders-div">
   <label for="deposit-amount">Deposit Amount:</label>
   <input type="text" id="slider1-value" readonly>
   <div id="slider1"></div>
   <label for="package-price">Package Price:</label>
   <input type="text" id="slider2-value" readonly>
   <input type="text" id="slider2-max" readonly>
   <div id="slider2"></div>
</div>