移动不同范围滑块时动态更改范围滑块值-前端问题

Dynamically change range slider value when different range slider is moved(移动不同范围滑块时动态更改范围滑块值)

本文介绍了移动不同范围滑块时动态更改范围滑块值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有两个范围滑块，我希望第二个滑块在第一个滑块更改时动态更新其值。

第一个滑块-

<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的当前输出。原因是第一个滑块实际生效或实时更改第二个值。

我想不出如何更改前交错值，因为它只在前交错滑块更改时才会更改。如何使脚本在左前psi值更改时进行更改？

推荐答案

我相信这应该能按您的要求工作？当移动其中一个滑块时，它应该更新另一个滑块。使用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();">

这篇关于移动不同范围滑块时动态更改范围滑块值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！