0
198
Views¿Cómo diseñar el control deslizante MUI?
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> ); }¿Cómo hacer que el rango dentro del pulgar y el pulgar sea verde y el rango fuera de ambos pulgares sea de un verde más claro?
·
Juan Pablo Isaza
2 answers
Answer question0
Incluya estas clases en su archivo CSS. La pista corresponde al rango entre los pulgares y el riel es el rango fuera de ambos pulgares.
.MuiSlider-thumb{ color: green; } .MuiSlider-rail{ color:lightgreen; } .MuiSlider-track{ color: green; }
·
Juan Pablo Isaza
Report
0
Puede personalizar su control deslizante con una utilidad de estilo :
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
Report
Answer question