frontPanel/src/ui_kit/CustomSlider.tsx

import { Slider } from "@mui/material";

type CustomSliderProps = {
    defaultValue?: number;
    value?: number | 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"
            data-cy="slider"
            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`,
                    },
                },
            }}
        />
    );
};