62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
|
import { Slider } from "@mui/material";
|
||
|
|
|
||
|
|
type CustomSliderProps = {
|
||
|
|
defaultValue?: number;
|
||
|
|
value?: number;
|
||
|
|
min?: number;
|
||
|
|
max?: number;
|
||
|
|
step?: number;
|
||
|
|
onChange?: (value: number | number[]) => void;
|
||
|
|
};
|
||
|
|
|
||
|
|
export const CustomSlider = ({
|
||
|
|
defaultValue,
|
||
|
|
value,
|
||
|
|
min = 0,
|
||
|
|
max = 100,
|
||
|
|
step,
|
||
|
|
onChange,
|
||
|
|
}: CustomSliderProps) => {
|
||
|
|
const handleChange = ({ type }: Event, newValue: number | number[]) => {
|
||
|
|
// Для корректной работы слайдера в FireFox
|
||
|
|
if (type !== "change") {
|
||
|
|
onChange?.(newValue);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Slider
|
||
|
|
value={value}
|
||
|
|
defaultValue={defaultValue}
|
||
|
|
min={min}
|
||
|
|
max={max}
|
||
|
|
step={step}
|
||
|
|
onChange={handleChange}
|
||
|
|
valueLabelDisplay="auto"
|
||
|
|
sx={{
|
||
|
|
color: "#7E2AEA",
|
||
|
|
height: "12px",
|
||
|
|
"& .MuiSlider-track": {
|
||
|
|
border: "none",
|
||
|
|
},
|
||
|
|
"& .MuiSlider-rail": {
|
||
|
|
backgroundColor: "#F2F3F7",
|
||
|
|
border: `1px solid #9A9AAF`,
|
||
|
|
},
|
||
|
|
"& .MuiSlider-thumb": {
|
||
|
|
height: 32,
|
||
|
|
width: 32,
|
||
|
|
border: `6px solid "#7E2AEA`,
|
||
|
|
backgroundColor: "white",
|
||
|
|
boxShadow: `0px 0px 0px 3px white,
|
||
|
|
0px 4px 4px 3px #C3C8DD`,
|
||
|
|
"&:focus, &:hover, &.Mui-active, &.Mui-focusVisible": {
|
||
|
|
boxShadow: `0px 0px 0px 3px white,
|
||
|
|
0px 4px 4px 3px #C3C8DD`,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
};
|