Revision history [back]

One method to alter the color of the disabled track in Mui <slider> is to use the "overrides" property to target the ".MuiSlider-rail" and ".Mui-disabled" classes, and set the "backgroundColor" property to the desired color. Here is an example:

import Slider from '@material-ui/core/Slider';
import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';

const theme = createMuiTheme({
  overrides: {
    MuiSlider: {
      rail: {
        '&.Mui-disabled': {
          backgroundColor: 'lightgray',
        },
      },
    },
  },
});

function MyComponent() {
  return (
    <ThemeProvider theme={theme}>
      <Slider disabled />
    </ThemeProvider>
  );
}

In this example, the disabled track of the Slider component will be colored with light gray. You can replace this value with any other valid CSS color value.