4个range输入框按原有比例自动分配100%总占比的实现问题

你想到的缩放因子思路是正确的，落地逻辑如下：

• 滑块触发调整前先记录所有滑块的原始值，避免调整过程中数值变化干扰比例计算
• 计算当前调整滑块之外，其余所有滑块的原始占比总和
• 用总占比100%减去当前滑块的新值，得到其余滑块需要分配的总占比，计算缩放因子：缩放因子 = 其余滑块需分配总占比 / 其余滑块原始占比总和
• 其余每个滑块的新值 = 自身原始值 * 缩放因子，可保证滑块之间的原有比例完全不变
• 边界处理：如果其余滑块原始总和为0（比如都被调到了最小值），无法按比例分配时就平均分配剩余占比，同时保证所有数值不低于HTML中设定的min限制

HTML代码 #

<input name="a" id="a" type="range" value="25" min="1" max="100"/>
<input name="b" id="b" type="range" value="25" min="1" max="100"/>
<input name="c" id="c" type="range" value="25" min="1" max="100"/>
<input name="d" id="d" type="range" value="25" min="1" max="100"/>

JS代码 #

const ranges = Array.from(document.querySelectorAll('input[type="range"]'));
let oldValues = [];

// 初始化记录初始值
updateOldValues();

ranges.forEach(range => {
  // 聚焦时记录所有滑块旧值，避免调整过程中数值互相影响
  range.addEventListener('focus', updateOldValues);
  // 用input事件实现拖动时实时更新
  range.addEventListener('input', handleRangeChange);
});

function updateOldValues() {
  oldValues = ranges.map(range => Number(range.value));
}

function handleRangeChange(e) {
  const activeIndex = ranges.indexOf(e.target);
  const activeNewVal = Number(e.target.value);
  // 计算其余滑块原始总和
  const otherOldSum = oldValues.reduce((sum, val, idx) => idx === activeIndex ? sum : sum + val, 0);
  // 计算其余滑块需要达到的总占比
  const otherNewSum = 100 - activeNewVal;

  ranges.forEach((range, idx) => {
    if (idx === activeIndex) return;
    let newVal;
    if (otherOldSum === 0) {
      // 边界情况：其余滑块原始总和为0时平均分配
      newVal = otherNewSum / (ranges.length - 1);
    } else {
      // 按原始比例缩放计算新值
      newVal = (oldValues[idx] / otherOldSum) * otherNewSum;
    }
    // 限制数值范围和min/max保持一致，保留两位小数匹配精度要求
    newVal = Math.max(1, Math.min(100, newVal));
    range.value = newVal.toFixed(2);
  });
}

你的三个示例场景均可完美匹配：

1. 调整第一个滑块到50%，第二个到25%，剩余两个滑块原始值都是25，总和50，缩放因子为25/50=0.5，计算得新值为25*0.5=12.5%
2. 两个滑块调整为29.75%，第三个调整为39.5%，剩余总占比为100-29.75*2-39.5=1%，直接分配给第四个滑块
3. 第一个滑块调整为75%，第二个调整为20%，剩余两个滑块原始总和50，缩放因子为5/50=0.1，计算得新值为25*0.1=2.5%

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