如何使用MUI Slider实现线性刻度超100范围的步进映射功能

AI 小北

2026-9-26

实现方案

MUI Slider 原生支持自定义数值值域，不需要手动录入180个全量刻度，也不需要自行计算步长对应的轨道占比，按以下规则配置即可实现1天对应1步的需求：

直接设置min={1}、max={180}、step={1}，此时滑块的每一次步进就对应1天，轨道总长度会自动平均分配给180个步长，无需额外配置步长长度参数
如果你需要在值标签、刻度上显示百分比而非天数，只需要通过valueLabelFormat、刻度label的转换逻辑做数值换算即可，换算公式为百分比 = 当前天数 / 180 * 100
若需要展示刻度，仅配置关键节点的mark即可，不需要列出全部180个值，滑块的可选值依然会按step=1限制为整数天

示例代码

import { useState } from 'react';
import Slider from '@mui/material/Slider';

export default function DaySlider() {
  // value 直接对应选中的天数，取值范围 1~180
  const [value, setValue] = useState(30);

  const handleChange = (_, newValue) => {
    setValue(newValue);
  };

  // 自定义值标签的显示内容（可根据需求调整）
  const formatValueLabel = (val) => {
    return `${val}天 / ${((val / 180) * 100).toFixed(0)}%`;
  };

  // 仅配置关键刻度即可，无需全量录入
  const marks = [
    { value: 1, label: '1天' },
    { value: 30, label: '30天' },
    { value: 90, label: '90天' },
    { value: 180, label: '180天' },
  ];

  return (
    <Slider
      min={1}
      max={180}
      step={1}
      value={value}
      onChange={handleChange}
      marks={marks}
      valueLabelDisplay="auto"
      valueLabelFormat={formatValueLabel}
    />
  );
}