如何在React Material UI Slider中使用自定义数值数组？

问题根源 #

你当前的marks格式完全错误，Material UI Slider的marks要求是包含value和label属性的对象数组，而非{44:1}这类键值对结构。另外直接把滑块取值范围设为[1,8]会让组件默认渲染连续数值，导致3、4位置出现无标签的空白间隙。

解决方案：映射索引到目标数值 #

通过将滑块的取值范围绑定到目标数组的索引而非实际数值，让轨道上的可选择点均匀分布，再通过格式转换映射回你需要的数值。具体实现步骤：

1. 定义目标数值数组：

const targetValues = [1, 2, 5, 6, 7, 8];

2. 生成正确格式的marks数组：

const marks = targetValues.map((value, index) => ({
  value: index,
  label: value.toString()
}));

3. 配置Slider组件：

<Slider
  min={0}
  max={targetValues.length - 1}
  step={1}
  marks={marks}
  valueLabelFormat={(index) => targetValues[index]}
  onChange={(event, newValue) => {
    // 转换为实际数值使用
    const actualValue = targetValues[newValue];
    console.log(actualValue);
  }}
  // 若使用范围选择，初始值设为索引数组
  defaultValue={[0, targetValues.length - 1]}
  valueLabelDisplay="auto"
/>

关键说明 #

• 滑块的min和max对应目标数组的首尾索引，step={1}确保只能选择数组中的对应位置，轨道上的点均匀分布，不会出现空白间隙。
• valueLabelFormat负责将索引转换为实际显示的数值标签。
• marks数组直接绑定索引和对应数值，确保每个可选择点都有正确的标签。

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