0
203
VistasHow to style MUI slider?
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?
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
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;
}
·
Juan Pablo Isaza
Denunciar
0
You can customize your slider with styled utility:
const green500 = "#228b22";
const green900 = "#7FFF00";
const CustomSlider = styled(Slider)(({ theme }) => ({
color: green500, //color of the slider between thumbs
"& .MuiSlider-thumb": {
backgroundColor: green500 //color of thumbs
},
"& .MuiSlider-rail": {
color: green900 ////color of the slider outside teh area between thumbs
}
}));
·
Juan Pablo Isaza
Denunciar
Responde la pregunta