Question

我有三个表示百分比值的 Material UI 滑块。我希望滑块的总数为 100，以便滑块的值自动调整以保持总数为 100。如何做到这一点？

Answer 1

slider1=Value1/(value1+value2+value3)
slider2=Value2/(value1+value2+value3)
slider3=Value3/(value1+value2+value3)

请注意，您需要值和滑块的状态。

Answer 2

您只需要使用 Material-UI 滑块替换基本输入即可。

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




///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'))

材质 UI 范围滑块总和 100

2 个答案: