如何使用mdb-react-ui-kit的MDBRange实现多滑块范围选择？

仅设置multiple={true}无法实现多滑块，还需绑定数组类型的value并处理onChange事件，完整实现如下：

核心代码示例 #

import { useState } from 'react';
import { MDBRange } from 'mdb-react-ui-kit';

function MultiRangeSlider() {
  // 初始化两个滑块的初始位置
  const [sliderValues, setSliderValues] = useState([20, 80]);

  const handleSliderChange = (e) => {
    // 多滑块的返回值为数组，直接更新状态
    setSliderValues(e.target.value);
  };

  return (
    <MDBRange
      multiple={true}
      min={1}
      max={100}
      value={sliderValues}
      onChange={handleSliderChange}
    />
  );
}

export default MultiRangeSlider;

关键注意点 #

• 必须将value绑定为数组，数组长度对应滑块数量（示例为2个）
• onChange事件中，e.target.value会直接返回包含滑块值的数组，无需额外转换
• 确保使用的mdb-react-ui-kit版本为v6及以上，早期版本不支持多滑块功能

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