Динамическое изменение значения ползунка диапазона при перемещении ползунка другого диапазона - PullRequest
Новая
       9

Динамическое изменение значения ползунка диапазона при перемещении ползунка другого диапазона

0 голосов
/ 26 апреля 2018

У меня есть 2 ползунка диапазона, я хотел бы, чтобы второй ползунок динамически обновлял свое значение при изменении первого ползунка ..

Первый слайдер - 

<span>Left Front Pressure (psi)<span id="lf_output_s"></span></span>      
 <input type="range" name="lf_lbs" min="4" max="12" value="<?php echo $lf_lbs;?>" class="sim_setup" id="lf_lbs_range_s">

Второй ползунок - 

 <span>Front Stagger (1/8 in)<span id="front_stagger_output_s"></span></span>
     <input type="range" name="front_stagger" step="0.125" min="0" max="2" value="<?php echo $front_stagger;?>" class="sim_setup" id="front_stagger_range_s">

Теперь я вывожу текущее значение из первого ползунка, используя JS - 

// Left front pressure //
var lf_lbs_range = document.getElementById("lf_lbs_range_s");
var lf_output = document.getElementById("lf_output_s");
lf_output.innerHTML = lf_lbs_range.value;
lf_lbs_range.oninput = function() {
lf_output.innerHTML = this.value;
}

Вот вывод второго слайдера - 

// Front Stagger //
var front_stagger_range = document.getElementById("front_stagger_range_s"); 
var front_stagger_output = document.getElementById("front_stagger_output_s"); 
front_stagger_output.innerHTML = front_stagger_range.value;
front_stagger_range.oninput = function() {
front_stagger_output.innerHTML = this.value;
}

Когда первый ползунок изменяется на один фунт / кв.дюйм или увеличивается на 1, я бы хотел умножить изменение на 0,125. Если увеличить на 2, умножить на 0,25 и т. Д. И применить его к текущему выходу ползунка # 2. Причина этого заключается в том, что первый ползунок фактически оказывает влияние или изменяет второе значение в режиме реального времени.

Я не могу понять, как изменить значение переднего каскада, поскольку оно изменяется только при изменении ползунка переднего каскада. Как я могу адаптировать скрипт для изменения при изменении значения левого переднего пси?

1 Ответ

0 голосов
/ 26 апреля 2018

Я считаю, что это должно работать так, как вам требуется? При перемещении одного ползунка он должен обновлять другой. При использовании события onchange обратите внимание: вы должны отпустить мышь после настройки ползунка, чтобы он обновился.

Редактировать: математика может быть немного неправильной, чтобы удовлетворить ваши потребности, но функция работает отлично. Математика не моя сильная сторона! 

var lf_lbs_range = document.getElementById("lf_lbs_range_s");
  var lf_output = document.getElementById("lf_output_s");
  var front_stagger_range = document.getElementById("front_stagger_range_s"); 
  var front_stagger_output = document.getElementById("front_stagger_output_s"); 
  
  
// Left front pressure //
function adjust_pressure() {
    lf_output_s.innerHTML = (document.getElementById("front_stagger_range_s").value / .25);
    lf_lbs_range_s.value = (document.getElementById("front_stagger_range_s").value / .25);
  
}
 
  
// Front Stagger //
function adjust_stagger() {
    front_stagger_output_s.innerHTML = (document.getElementById("lf_lbs_range_s").value * .25);
    front_stagger_range_s.value = (document.getElementById("lf_lbs_range_s").value * .25);
}

adjust_stagger();
adjust_pressure();
<span>Left Front Pressure (psi)<span id="lf_output_s"></span></span><br />     
 <input type="range" name="lf_lbs" min="4" max="12" value="4" class="sim_setup" id="lf_lbs_range_s" onchange="adjust_stagger();">
<br />
 <span>Front Stagger (1/8 in)<span id="front_stagger_output_s"></span></span><br />
     <input type="range" name="front_stagger" step="0.125" min="1" max="3" value="0" class="sim_setup" id="front_stagger_range_s" onchange="adjust_pressure();">
...