41 lines
925 B
JavaScript
41 lines
925 B
JavaScript
import { Box, Slider } from '@mui/material';
|
|
import { memo } from 'react';
|
|
|
|
const sliderContainerSx = { width: 200, height: '2.5rem', display: 'flex', alignItems: 'center', gap: 2 };
|
|
const sliderSx = {
|
|
'& .MuiSlider-thumb': {
|
|
width: 8,
|
|
height: 14,
|
|
borderRadius: 0,
|
|
},
|
|
};
|
|
const zoomMarks = [
|
|
{ value: 0.5, label: '50%' },
|
|
{ value: 1, label: '100%' },
|
|
{ value: 2, label: '200%' },
|
|
];
|
|
|
|
const ZoomSlider = ({ onChange, width = 200, curScale }) => {
|
|
const handleChange = (_event, newValue) => {
|
|
if (onChange) onChange(newValue);
|
|
};
|
|
|
|
return (
|
|
<Box sx={width === 200 ? sliderContainerSx : { ...sliderContainerSx, width }}>
|
|
<Slider
|
|
sx={sliderSx}
|
|
value={curScale}
|
|
onChange={handleChange}
|
|
min={0.5}
|
|
max={2}
|
|
step={0.01}
|
|
valueLabelDisplay='auto'
|
|
valueLabelFormat={(value) => `${Math.round(value * 100)}%`}
|
|
marks={zoomMarks}
|
|
/>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default memo(ZoomSlider);
|