How to style MUI slider?

Issue

import * as React from "react";
import Box from "@mui/material/Box";
import Slider from "@mui/material/Slider";

function valuetext(value) {
  return `${value}°C`;
}

export default function RangeSlider() {
  const [value, setValue] = React.useState([20, 37]);

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

  return (
    <Box sx={{ width: 300 }}>
      <Slider
        getAriaLabel={() => "Temperature range"}
        value={value}
        onChange={handleChange}
        valueLabelDisplay="auto"
        getAriaValueText={valuetext}
      />
    </Box>
  );
}

How to make range within the thumb and the thumb green and the range outside of both thumbs a lighter green?

Solution

Include these classes in your CSS file. Track corresponds to the range between thumbs and rail is the range outside both thumbs.

.MuiSlider-thumb{
  color: green;
}
.MuiSlider-rail{
  color:lightgreen;
}
.MuiSlider-track{
  color: green;
}

Answered By - Mohit Kushwaha