MUI范围滑块双滑块拉至最右端时标记重复问题及非源码修改解决方案咨询

The Problem Breakdown #

When both thumbs of an MUI Range Slider are dragged to the maximum value (e.g., 100), you’ll notice duplicate marks appearing in the UI alongside a React duplicate key error in the console. This happens because the underlying SliderUnstyled component uses the mark’s value as the React key—when both thumbs share the same value, the component tries to render the same mark twice with identical keys, triggering the error.

Workarounds That Don’t Touch Source Code #

Instead of modifying MUI’s internal SliderUnstyled.js file, you can override the mark rendering logic directly in your code. Here are two reliable approaches:

1. Customize the Marks Array with Unique Keys #

Modify your original marks array to include unique keys for each mark (and their labels) before passing it to the Slider. This bypasses the default key assignment logic in SliderUnstyled.

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

// Your original marks configuration
const baseMarks = [
  { value: 0, label: '0' },
  { value: 50, label: '50' },
  { value: 100, label: '100' },
];

// Add unique keys to each mark and its label
const markedWithUniqueKeys = baseMarks.map((mark, index) => ({
  ...mark,
  key: `custom-mark-${index}-${mark.value}`,
  label: <span key={`mark-label-${index}-${mark.value}`}>{mark.label}</span>,
}));

export default function FixedRangeSlider() {
  const [sliderValue, setSliderValue] = useState([0, 100]);

  const handleSliderChange = (_, newValue) => {
    setSliderValue(newValue);
  };

  return (
    <Slider
      value={sliderValue}
      onChange={handleSliderChange}
      marks={markedWithUniqueKeys}
      min={0}
      max={100}
      valueLabelDisplay="auto"
      disableSwap
    />
  );
}

2. Use the renderMark Prop for Full Control #

If you prefer more flexibility, use the Slider’s renderMark prop to completely control how each mark is rendered. This lets you explicitly set unique keys for every mark element.

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

const baseMarks = [
  { value: 0, label: '0' },
  { value: 50, label: '50' },
  { value: 100, label: '100' },
];

export default function FixedRangeSlider() {
  const [sliderValue, setSliderValue] = useState([0, 100]);

  const handleSliderChange = (_, newValue) => {
    setSliderValue(newValue);
  };

  const customRenderMark = (mark, index) => {
    return (
      <div key={`mark-container-${index}-${mark.value}`}>
        <span className="MuiSlider-markLabel" key={`mark-text-${index}-${mark.value}`}>
          {mark.label}
        </span>
      </div>
    );
  };

  return (
    <Slider
      value={sliderValue}
      onChange={handleSliderChange}
      marks={baseMarks}
      renderMark={customRenderMark}
      min={0}
      max={100}
      valueLabelDisplay="auto"
      disableSwap
    />
  );
}

How This Works #

Both approaches leverage MUI’s built-in customization options to override the default mark rendering. By assigning unique keys (combining the mark’s index and value ensures uniqueness even if multiple marks share the same value), we avoid the duplicate key error that causes the mark duplication issue. Best of all, this keeps your fix isolated to your application code—no need to fork or modify MUI’s source, making future version upgrades hassle-free.

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