78 lines
2.0 KiB
TypeScript
78 lines
2.0 KiB
TypeScript
|
import { Slider, useTheme } from "@mui/material";
|
||
|
|
|
||
|
|
type CustomSliderProps = {
|
||
|
|
defaultValue?: number;
|
||
|
|
value?: number | number[];
|
||
|
|
min?: number;
|
||
|
|
max?: number;
|
||
|
|
step?: number;
|
||
|
|
onChange?: (_: Event, value: number | number[]) => void;
|
||
|
|
onChangeCommitted?: (_: React.SyntheticEvent | Event, value: number | number[]) => void;
|
||
|
|
};
|
||
|
|
|
||
|
|
export const CustomSlider = ({
|
||
|
|
defaultValue,
|
||
|
|
value,
|
||
|
|
min = 0,
|
||
|
|
max = 100,
|
||
|
|
step,
|
||
|
|
onChange,
|
||
|
|
onChangeCommitted,
|
||
|
|
}: CustomSliderProps) => {
|
||
|
|
// const handleChange = ({ type }: Event, newValue: number | number[]) => {
|
||
|
|
// // Для корректной работы слайдера в FireFox
|
||
|
|
// if (type !== "change") {
|
||
|
|
// onChange?.(e, newValue);
|
||
|
|
// }
|
||
|
|
// };
|
||
|
|
const theme = useTheme();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Slider
|
||
|
|
value={value}
|
||
|
|
defaultValue={defaultValue}
|
||
|
|
min={min}
|
||
|
|
max={max}
|
||
|
|
step={step}
|
||
|
|
onChange={onChange}
|
||
|
|
valueLabelDisplay="on"
|
||
|
|
onChangeCommitted={onChangeCommitted}
|
||
|
|
onMouseDown={(e) => e.stopPropagation()}
|
||
|
|
data-cy="slider"
|
||
|
|
sx={{
|
||
|
|
color: theme.palette.brightPurple.main,
|
||
|
|
padding: "0",
|
||
|
|
marginTop: "75px",
|
||
|
|
"& .MuiSlider-valueLabel": {
|
||
|
|
background: theme.palette.brightPurple.main,
|
||
|
|
borderRadius: "8px",
|
||
|
|
minWidth: "60px",
|
||
|
|
width: "auto",
|
||
|
|
whiteSpace: "nowrap",
|
||
|
|
textAlign: "center",
|
||
|
|
height: "36px",
|
||
|
|
},
|
||
|
|
"& .MuiSlider-valueLabel::before": {
|
||
|
|
width: "6px",
|
||
|
|
height: "2px",
|
||
|
|
transform: "translate(-50%, 50%) rotate(90deg)",
|
||
|
|
bottom: "-5px",
|
||
|
|
},
|
||
|
|
"& .MuiSlider-rail": {
|
||
|
|
backgroundColor: "#F2F3F7",
|
||
|
|
border: `1px solid #9A9AAF`,
|
||
|
|
height: "12px",
|
||
|
|
},
|
||
|
|
"& .MuiSlider-thumb": {
|
||
|
|
border: "3px #f2f3f7 solid",
|
||
|
|
height: "23px",
|
||
|
|
width: "23px",
|
||
|
|
},
|
||
|
|
"& .MuiSlider-track": {
|
||
|
|
height: "12px",
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
};
|