MaterialUI 滑块限制

Question

我有 8 个滑块，范围为 0-100，并在 0、25、50、75 和 100 处有 5 个标记。我希望用户能够在 8 个滑块上分配 350 个点。显然，每一步都会消耗 25 点，如果您向后移动，就会返回它们。

我尝试在花费 350 点后禁用滑块，但随后我无法将它们滑回来（因为它们被禁用了，哈哈）。只有使用额外的按钮进行重置才有效，但这不是一个非常优雅的解决方案。而且只要点击一个标记就可以绕过限制。

Answer 1

如果滑块超过最大值，您可以通过编程将其移动到最大值 - 您可以使用

onChange

或

onChangeCommitted

道具来实现这一点。它可能看起来像这样：

  const [value, setValue] = React.useState(0);

  function handleChange(_, newValue) {
    const maxValue = getMaxValue();
    if (newValue > maxValue) {
      setValue(maxValue);
    } else {
      setValue(newValue);
    }
  }

//...
  return (
    <Slider
      value={value}
      onChange={handleChange}
      //other props...
    />
  )

您所要做的就是弄清楚如何存储每个滑块的值，如何实现

getMaxValue

功能以及如何通知用户他们试图超出限制。也许滑块（或其背景）会以红色闪烁？显示限制并在每次更改时更新它也会有所帮助。