“Slots” prop does nothing when applied on material-ui Slider component

I am trying to figure out what “slots” prop has to offer to the Slider component in terms of taking control of inner components rendering (track, thumb, etc).

I am rendering a simple Slider component as shown below

const marks = [
  { value: 0, label: '0' },
  { value: 10, label: '10' },
  { value: 20, label: '20' },
  { value: 30, label: '30' },
  { value: 40, label: '40' },
  { value: 50, label: '50' },
];

const SliderUsingSlots = () => (
  <Slider
    defaultValue={0}
    step={null}
    marks={marks}
    min={marks[0].value}
    max={marks[marks.length - 1].value}
    slots={{ root: 'div', thumb: 'div' }}
  />
);

However, not even this simple example is working for me. “Slots” prop is not being processed in any way (root and thumb spans not being changed to divs), it is just passed to the DOM

<span slots="[object Object]" class="MuiSlider...

What am I doing wrong?

Answer

I have found that the slots prop for Slider is not working (fully) in mui 5.9.3. Try to upgrade to 5.10.x.

Advertisement

Answer