我试图尽可能接近OP原始代码，并使用CSS * 自定义属性 * 和 Javascript 创建了一个混合解决方案。

• 已创建父#input Package 器，以保存三个CSS * 自定义属性 * 以及当前输入的“投票者”值。
• 将一个简单的JS函数附加到每个input元素的inline oninput 属性。此JS函数将当前键入的input值赋给CSS * 自定义属性 *。使用 onchange 也可以，但需要用户先按[Enter]，其中 oninput 是立即数。
• 创建 Javascript 函数showInput()，该函数从更新的CSS * 自定义属性 * 中检索当前输入值。它计算当前的 Unaccounted Voters 值，使用函数toDecimals()将其四舍五入为两位小数，并将其分配给#output元素以显示中间结果。
• CSS #output::after展示了一个小技巧，如何将CSS * 自定义属性 * 的值赋给CSS counter()，以使用content显示它。不幸的是counter()只返回整数值，否则可以跳过使用 Javascript 函数showOutput()。

#input {
    --total      /* current 'Total eligible voters' value */
    --turnout    /* current 'Voter turnout' percentage */
    --ineligible /* current 'Ineligible bulletins' percentage */
}

#output {
    --unaccounted /* calculated value current 'Unaccounted Voters' */
}

代码段代码中带有注解...

x一个一个一个一个x一个一个二个一个x一个一个三个一个

我们会选择一种基于组件的方法

• 强制更干净/更好结构化的标记，
• 要求采用脚本编制方法，以精简的方式初始化组件并封装组件相关数据/引用......因此......
• 启用代码重用。

在提出了一个改进的标记之后，一个组件可以通过它的根节点来标识，人们可以query任何可用的根节点并开始每个组件的初始化。
对于OP的情况，我们将实现一个处理函数，该函数是this上下文感知的，因此通过bound context接收所有相关组件数据。这里，我们将查询并绑定所有相关元素节点的输入和输出，这允许两者，注册由bind和call在组件的初始和更新渲染过程中创建的处理函数。
此外，通过::after CSS pseudo-element、基于content的CSS generated content和简单的input类型事件处理程序（将元素的value（属性）写入元素的value属性）呈现其当前范围值，可以增强所选'range'类型输入元素。
在这两种情况下，注册增强型range元素的值更新和注册组件的更新处理，都可以选择'input' event。

function updateRangePseudoContent({ currentTarget }) {
  currentTarget
    .setAttribute('value', currentTarget.value);
}
function updateUnaccountedVotesFromBoundContext() {
  const { output, total, turnout, ineligible } = this;
  output
    .value = Math.round(
      (1 - (ineligible.valueAsNumber / 100)) *
      (turnout.valueAsNumber / 100) *
      total.valueAsNumber
    );
}

function initializeEachUnaccountedVotesCalculator() {
  document
    .querySelectorAll('[data-unaccounted-votes-calculator] [type="range"]')
    .forEach(elmNode =>
      elmNode.addEventListener('input', updateRangePseudoContent)
    );
  document
    .querySelectorAll('[data-unaccounted-votes-calculator]')
    .forEach(rootNode => {

      const output = rootNode
        .querySelector('output');
      const total = rootNode
        .querySelector('[data-name="total-voters"]');
      const turnout = rootNode
        .querySelector('[data-name="voter-turnout"]');
      const ineligible = rootNode
        .querySelector('[data-name="ineligible-bulletins"]');

      rootNode
        .addEventListener(
          'input',
          updateUnaccountedVotesFromBoundContext
            .bind({ output, total, turnout, ineligible })
        );

      // initialization via all the current element's data.
      updateUnaccountedVotesFromBoundContext
        .call({ output, total, turnout, ineligible });
    });
}

initializeEachUnaccountedVotesCalculator();

fieldset {
  width: 70%;
  padding-top: 0;
  padding-bottom: 0;
}
fieldset, label {
  margin: 5px 0;
}
label {
  width: 90%;
}
label, label > span, label > input {
  position: relative;
  display: block;
}
label > span::after {
  content: ':';
}
[type="range"] {
  width: calc(100% - 10px - 4em);
}
[type="range"]::after {
  position: absolute;
  left: calc(100% + 10px);
  content: attr(value)' %';
  width: 4em;
  height: 1em,
}
output {
  font-weight: bolder;
}

<fieldset data-unaccounted-votes-calculator>
  <label>
    <span>Total eligible voters</span>
    <input type="number" min="0" step="1" value="1000" data-name="total-voters">
  </label>

  <label>
    <span>Voter turnout</span>
      <input type="range" min="0" max="100" value="50" step="0.1" data-name="voter-turnout">
  </label>

  <label>
    <span>Percentage of ineligible bulletins</span>
      <input type="range" min="0" max="100" value="10" step="0.1" data-name="ineligible-bulletins">
  </label>

  <label>
    <span>Unaccounted votes</span>
    <output>0</output>
  </label>
</fieldset>

<fieldset data-unaccounted-votes-calculator>
  <label>
    <span>Total eligible voters</span>
    <input type="number" min="0" step="1" value="25000" data-name="total-voters">
  </label>

  <label>
    <span>Voter turnous</span>
      <input type="range" min="0" max="100" value="70" step="0.1" data-name="voter-turnout">
  </label>

  <label>
    <span>Percentage of ineligible bulletins</span>
      <input type="range" min="0" max="100" value="5" step="0.1" data-name="ineligible-bulletins">
  </label>

  <label>
    <span>Unaccounted votes</span>
    <output>0</output>
  </label>
</fieldset>

我会尝试设置一个事件监听器来监听输入的变化，然后让它在发生变化时更新输出，但我对编程还是个新手，可能有一个更简单的方法。