2022-04-17 19:51:14 +02:00
|
|
|
import { Slider, Tooltip, Typography, Box } from "@mui/material";
|
2022-05-10 02:32:32 +02:00
|
|
|
import React, { useState } from "react";
|
2022-04-17 19:51:14 +02:00
|
|
|
|
|
|
|
interface IProps {
|
2022-07-15 01:09:21 +02:00
|
|
|
initialValue: number;
|
2022-07-15 04:02:49 +02:00
|
|
|
callback: (event: Event | React.SyntheticEvent<Element, Event>, newValue: number | number[]) => void;
|
2022-04-17 19:51:14 +02:00
|
|
|
step: number;
|
|
|
|
min: number;
|
|
|
|
max: number;
|
|
|
|
tooltip: React.ReactElement;
|
|
|
|
label: string;
|
2022-04-17 22:08:58 +02:00
|
|
|
marks?: boolean;
|
2022-04-17 19:51:14 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
export const OptionsSlider = (props: IProps): React.ReactElement => {
|
2022-05-10 02:32:32 +02:00
|
|
|
const [value, setValue] = useState(props.initialValue);
|
|
|
|
|
|
|
|
const onChange = (_evt: Event, newValue: number | Array<number>): void => {
|
2022-07-15 01:09:21 +02:00
|
|
|
if (typeof newValue === "number") setValue(newValue);
|
2022-05-10 02:32:32 +02:00
|
|
|
};
|
|
|
|
|
2022-04-17 19:51:14 +02:00
|
|
|
return (
|
|
|
|
<Box>
|
|
|
|
<Tooltip title={<Typography>{props.tooltip}</Typography>}>
|
|
|
|
<Typography>{props.label}</Typography>
|
|
|
|
</Tooltip>
|
|
|
|
<Slider
|
2022-05-10 02:32:32 +02:00
|
|
|
value={value}
|
|
|
|
onChange={onChange}
|
2022-05-10 02:34:36 +02:00
|
|
|
onChangeCommitted={props.callback}
|
2022-04-17 19:51:14 +02:00
|
|
|
step={props.step}
|
|
|
|
min={props.min}
|
|
|
|
max={props.max}
|
|
|
|
valueLabelDisplay="auto"
|
|
|
|
sx={{
|
|
|
|
"& .MuiSlider-thumb": {
|
|
|
|
height: "12px",
|
|
|
|
width: "12px",
|
|
|
|
},
|
|
|
|
}}
|
2022-04-17 22:08:58 +02:00
|
|
|
marks={props.marks}
|
2022-04-17 19:51:14 +02:00
|
|
|
/>
|
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
};
|