MUI 滑块标记和标签显示为等间距

Question

我正在使用具有动态值的 mui 滑块，

for example const marks = [1, 3, 10].map((value) => ({
  value,
  label: value
}));

<Slider
          value={value != undefined ? parseInt(value) : 0}
          marks={marks}
          step={null}
          max={max?.value} // 10
          sx={CustomSliderStyles}
        />

之后我的用户界面看起来像

但我希望 1、3 和 10 的间距相等，如下所示

或任何其他可用于此功能的滑块？

Answer 1

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

  const marks = [
    { value: 0, label: 1 },
    { value: 1, label: 3 },
    { value: 2, label: 10 },
  ].map(({ value, label }) => ({
    value,
    label,
  }));

  const max = marks.reduce((prev, current) =>
    prev.value > current.value ? prev : current
  );

  return (
    <Slider
      value={value}
      onChange={(_, newValue: number) => {
        setValue(newValue);
      }}
      marks={marks}
      max={max?.value} // 10
    />
  );
};

您可以这样做，其中值均匀分布，标签是您想要的标签。如果您在其他地方使用它，您只需记住将值重新转换为正确的标签