如何禁用MUI Range Slider（范围滑块）的右侧滑块？

MUI的Slider组件本身没有提供单独禁用单个滑块的配置项，我们可以通过限制值更新逻辑 + 自定义样式 + 阻止交互事件这三个层面来实现需求：

1. 完整实现代码 #

import Slider from '@mui/material/Slider';
import React from 'react';

const App = () => {
  const [value, setValue] = React.useState<number[]>([20, 100]);

  const handleChange = (event: Event, newValue: number | number[]) => {
    if (Array.isArray(newValue)) {
      // 固定右侧滑块的值，仅更新左侧滑块
      setValue([newValue[0], value[1]]);
    }
  };

  // 阻止右侧滑块的交互事件
  const handleThumbInteraction = (event: React.MouseEvent | React.TouchEvent) => {
    const thumb = event.target as HTMLElement;
    const thumbElements = Array.from(thumb.parentElement?.children || []);
    const thumbIndex = thumbElements.indexOf(thumb);
    // 第二个滑块（索引为1）触发事件时，阻止默认行为
    if (thumbIndex === 1) {
      event.preventDefault();
      event.stopPropagation();
    }
  };

  return (
    <Slider
      value={value}
      onChange={handleChange}
      valueLabelDisplay="auto"
      onMouseDown={handleThumbInteraction}
      onTouchStart={handleThumbInteraction}
      sx={{
        // 给右侧滑块设置禁用样式
        '& .MuiSlider-thumb:nth-of-type(2)': {
          backgroundColor: '#bdbdbd',
          cursor: 'not-allowed',
          '&:hover, &.Mui-focusVisible': {
            boxShadow: 'none',
          }
        },
        // 调整轨道样式，让右侧未选中区域更贴合禁用视觉
        '& .MuiSlider-track': {
          width: `${(value[0] / 100) * 100}%`,
        }
      }}
    />
  );
};

export default App;

2. 关键实现细节 #

• 值限制：在handleChange中强制保留右侧滑块的原有值，确保用户拖动右侧滑块时，状态不会被更新。
• 交互阻止：通过onMouseDown和onTouchStart事件，判断触发交互的是第二个滑块时，阻止默认行为，彻底禁止拖动操作。
• 视觉反馈：通过sx属性修改右侧滑块的背景色、光标样式，让用户直观感知到该滑块不可交互。

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