通过考虑共享剩余 % 的每个范围的值，在 4 个范围输入之间共享 100%

Question

我有 4 个输入，我试图根据它们之前的值来分享它们的权益值。

我想要实现的是，例如，如果我有一个字段为 50%，另一个字段为 25%，其余字段将为 12.5% 如果我有两个 29.75% 的字段和一个 39.5% 的字段，最后一个将是 1% 如果我有一个 75% 的字段和一个 20% 的字段，其他字段将为 2.5% 等等。

以下是我迄今为止尝试失败的方法：

let ranges = [a,b,c,d];
let old_value = 1;

for(let rang of ranges)
{
    rang.onfocus=(e)=>{
    old_value=parseInt(e.target.value);
  }
    rang.onchange=(e)=>{
    console.log(old_value);
    let sortedRanges = ranges.filter(el=>el.name!=e.target.name);
    for(let cur of sortedRanges)
        cur.value-= (parseInt(e.target.value) - old_value)/4;
    old_value = e.target.value;
  }
}

<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"/>

我也尝试研究比例，例如，如果我有一个字段，以前是 25，现在是 40，表示比例因子为 1.6，但还没有弄清楚这有什么用.

此外，简单得多的简单方法是将剩余百分比除以 3 并不能将其削减，就好像另一个字段作为不同的值一样，剩余的三个字段之间没有规则的比率。

建议。

Answer 1

const ranges = [a,b,c,d];
ranges.forEach(rangeElement => {
  rangeElement.addEventListener('change', ({target: { value } }) => {
    rangeElement.setAttribute('value', (+value).toFixed(2));
    const rangeIndex = ranges.indexOf(rangeElement)
    const previousRanges = ranges.slice(0, rangeIndex);
    const nextRanges = ranges.slice(rangeIndex + 1);
    const sumOfPrevious = +value + previousRanges.reduce((acc, {value}) => acc + +value, 0)
    const valueOfRest = ((100 - sumOfPrevious) / nextRanges.length).toFixed(2)
    nextRanges.forEach(range => range.setAttribute('value', valueOfRest));
  })
})

input::after {
  content: attr(value);
}

<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"/>

通过考虑共享剩余 % 的每个范围的值，在 4 个范围输入之间共享 100%

Share 100% between 4 range inputs by taking into account the value of each range for sharing the remaining %

javascript

math

percentage