滑块平衡逻辑异常：拖动Range Input求和结果不一致问题

我有一组range input滑块，要求无论数量多少，总和始终保持为100¹。本次示例展示两个滑块的情况，但问题在任意数量滑块下都会出现。我使用Svelte开发，该问题同样可能出现在原生JS中。

¹完整需求：

• 滑块总和必须为100
• 调整某一滑块时，其他滑块需保持原有比例进行平衡，不能简单用100减去新值后平分给剩余滑块
• 该逻辑需支持任意数量的滑块

当前实现代码 #

<script lang="ts">
  const sliders = [
    { id: 1, percentage: 100 },
    { id: 2, percentage: 100 },
    // { id: 3, percentage: 100 },
    // { id: 4, percentage: 100 },
    // { id: 5, percentage: 100 },
  ];

  const handleInput = (event: InputEvent) => {
    const element = event.target as HTMLInputElement;
    const newValue = Number(element.value);
    const sliderId = Number(element.dataset["slider"]);
    // 修正原代码笔误：poolId → sliderId
    sliders.find(slider => slider.id === sliderId).percentage = newValue;

    balanceSliders();
  }

  const balanceSliders = () => {
    const total = sliders
      .map(slider => slider.percentage)
      .reduce((prev, next) => prev + next, 0);
    const normaliser = 100 / total;

    sliders.forEach(slider => {
      slider.percentage = slider.percentage * normaliser;
    });
  };

  balanceSliders();
</script>

<form>
  {#each sliders as {id, percentage}}
    <div>
      <input type="range" min="0" max="100" step="0.01" data-slider={id} bind:value={percentage} on:input={handleInput} />
      <span>{percentage.toFixed(2)}</span>
    </div>
  {/each}
</form>

核心问题 #

当前实现存在精度误差：拖动滑块接近100时，总和会超过100。缓慢拖动时误差较小（例如显示98.18和5.88），快速拖动时误差则大得多（例如显示100和25.85），不符合需求。

拖动速度影响误差的现象让我推测问题出在Svelte的事件处理部分，而非平衡公式本身。我可以设置滑块仅在用户停止拖动后再平衡，但出于展示需求，希望能在拖动过程中实时平衡。

请问有什么解决思路？

内容的提问来源于stack exchange，提问作者theberzi