反应链接范围滑块值

Question

我创建了一组共享相同值的范围滑块。当您向上移动一个滑块时，其他滑块需要自动向下等。总/最大值为 100。问题是：当我将滑块 1、滑块 2 向下移动到零时，滑块 3 应到达 100%（总计和最大值）但它停止在 97.55%。 任何人都知道如何解决价值问题，也许可以建议对此代码进行任何改进。 谢谢

https://codesandbox.io/s/linked-sliders-kchoz?file=/src/index.js

///Index.js
import React, {useState} from 'react'
import ReactDOM from 'react-dom'
import Slider from './slider'

const data = ['Slider 1', 'Slider 2', 'Slider 3']

function App({sliders}) {
  const [values, setValues] = useState(
    new Array(sliders.length).fill(100 / sliders.length),
  )

  function handleChange(index, value) {
    let maxValue = 100
    const remaining = maxValue - parseInt(value, 10)
    setValues((vs) =>
      vs.map((v, i) => {
        if (i === index) return parseInt(value, 10)
        const oldRemaining = maxValue - parseInt(vs[index], 10)
        if (oldRemaining) return (remaining * v) / oldRemaining
        return remaining / (sliders.length - 1)
      }),
    )
  }

  return sliders.map((item, index) => (
    <Slider
      key={index}
      index={index}
      value={values[index]}
      title={item}
      onChange={(e) => handleChange(index, e.target.value)}
    />
  ))
}

ReactDOM.render(<App sliders={data} />, document.getElementById('root'))





///Slider.js 

import React from 'react'

const Slider = ({title, value, onChange}) => {
  return (
    <>
      <div className="slider-container">
        <div className="range-min-max-values">
          <span>{title}</span>
        </div>
        <input
          type="range"
          min={0}
          max={100}
          value={value}
          title={title}
          onChange={onChange}
        />
        <span>{value.toFixed(2)}%</span>
      </div>
    </>
  )
}

export default Slider