Dynamically change range slider value when different range slider is moved

Question

I have 2 range sliders, I would like the second slider to update its value dynamicallly when the first slider is changed..

First slider -

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

Second Slider -

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

Now I output the current value from the first slider using 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;
}

Here is the output of the second slider -

// 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;
}

When the first slider changes by one psi or increments by 1 I would like to multiply the change by 0.125. If increments by 2 then multiply by 0.25 etc. and apply it to the current output of slider #2. The reason for this is the first slider actually has an effect or changes the second value in real time..

I cannot figure out how to change the front stagger value since it is only changed when the front stagger slider changes.. How can I adapt the script to change when the left front psi value is changed?

Answer 1

I believe this should work as you require? When moving either slider it should update the other. Using onchangeevent, note: you must release the mouse after adjusting a slider for it to update.

Edit: the math may be slightly wrong to suit your needs but the function works fine. Maths are not my strong point!

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();">