56 lines
1.1 KiB
TypeScript
56 lines
1.1 KiB
TypeScript
import { Grid, Slider as MuiSlider, Typography } from "@mui/material";
|
|
import { PrimitiveAtom, useAtom } from "jotai";
|
|
|
|
interface Props {
|
|
atom: PrimitiveAtom<number>;
|
|
min: number;
|
|
max: number;
|
|
label: string;
|
|
xs?: number;
|
|
marksFilter?: number;
|
|
}
|
|
|
|
export default function Slider({
|
|
min,
|
|
max,
|
|
label,
|
|
atom,
|
|
xs,
|
|
marksFilter = 1,
|
|
}: Props) {
|
|
const [value, setValue] = useAtom(atom);
|
|
|
|
return (
|
|
<Grid
|
|
item
|
|
container
|
|
xs={xs ?? 10}
|
|
justifyContent="center"
|
|
alignItems="center"
|
|
>
|
|
<Typography
|
|
id={`input-${label}`}
|
|
gutterBottom
|
|
textAlign="left"
|
|
width="100%"
|
|
>
|
|
{label}
|
|
</Typography>
|
|
|
|
<MuiSlider
|
|
min={min}
|
|
max={max}
|
|
marks={Array.from({ length: max - min + 1 }, (_, i) => ({
|
|
value: i + min,
|
|
label: `${i + min}`,
|
|
})).filter((_, i) => i % marksFilter === 0)}
|
|
step={1}
|
|
valueLabelDisplay="off"
|
|
value={value}
|
|
onChange={(_, value) => setValue(value as number)}
|
|
aria-labelledby={`input-${label}`}
|
|
/>
|
|
</Grid>
|
|
);
|
|
}
|