Блог

У меня есть два ползунка. Я пытаюсь изменить значения второго ползунка на основе первого изменения ползунка. Я не уверен, следует ли мне использовать условие 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>
  

Любая помощь будет высоко оценена.

Вы устанавливаете максимальное значение в опции и значение ползунка, но минимальное значение ползунка 2 остается неизменным на уровне 411000, что выше вашего максимального значения.

Следующий фрагмент является рабочим примером, однако расчет с использованием значения ползунка 1 * 1.5 не равен максимальному значению, которое вы хотите установить для ползунка 2. Поэтому я предлагаю вам пересмотреть расчет и убедиться, что при изменении параметра минимальное и максимальное значения ползунка составляютсмысл.

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