Javascript多范围滑块值交叉更新

如何解决Javascript多范围滑块值交叉更新

需要一个 javascript 侦听器或函数“frame”来填充一些最终计算。该计划适用于一个在线计算器，它将从范围滑块中获取 3 个值并更新 5-6 个仅输出字段。重点是，一旦我们更新了每个滑块，其他两个也必须更新（根据我得到的计算）。

我已经在 PHP 中运行了整个计算，但在该解决方案中，总是只给出这 3 个输入中的一个，其余的被计算出来。由于计算非常复杂，因此不发布整个脚本。

也许你可以帮助我为这 3 个范围滑块设置最简单的监听器，我可以用计算来填充。最简单的js，不需要库。

谢谢

<div id="slidercontainer">
  <input type="range" min="0" max="1000" step="50" class="slider" id="mfee">
  <p>Mfee value: <span id="mfeeval">0.00</span></p>
  
  <input type="range" min="0" max="30000" value="1000" step="100" class="slider" id="usage">
  <p>Usage value: <span id="usageval">0.00</span></p>

  <input type="range" min="0" max="30.61" value="5" class="slider" id="power">
  <p>Power value: <span id="powerval">0.00</span></p>
  
  <ul>  
   <li>Result #1 <span id="r1">0.00</span></li>
   <li>Result #2 <span id="r2">0.00</span></li>
   <li>Result #3 <span id="r3">0.00</span></li>
   <li>Result #4 <span id="r4">0.00</span></li>
   <li>Result #1 <span id="45">0.00</span></li>
  </ul>
</div>

所以我想我需要为三个滑块中的每一个添加一个侦听器，在值更改时也会更新所有 vlue id 和其他滑块......

有数学来计算所有结果字段，只是不知道如何使将在滑块上触发的工作侦听器发生变化

期待您的帮助谢谢