Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | import { Slider as MuiSlider, useTheme } from '@mui/material';
import React from 'react';
export type SliderMark = {
label?: string;
value: number;
};
export type SliderProps = {
defaultValue?: number;
value?: number;
marks?: SliderMark[];
min?: number;
max?: number;
onChange: (value: number) => void;
step?: number;
valueLabelDisplay?: 'auto' | 'on' | 'off';
};
export default function Slider(props: SliderProps): JSX.Element {
const { defaultValue, value, marks, min, max, onChange, step, valueLabelDisplay } = props;
const theme = useTheme();
const sliderStyles = {
'.MuiSlider-rail': {
backgroundColor: theme.palette.TwClrBgBrandTertiary,
height: theme.spacing(0.5),
},
'.MuiSlider-track': {
display: 'none',
},
'.MuiSlider-mark': {
backgroundColor: theme.palette.TwClrBgBrand,
height: '8px',
width: '8px',
borderRadius: '4px',
},
'.MuiSlider-thumb': {
backgroundColor: theme.palette.TwClrBgBrand,
height: '16px',
width: '16px',
borderRadius: '8px',
},
};
const handleChange = (event: React.SyntheticEvent | Event, val: number | number[]) => {
if (!Array.isArray(val)) {
onChange(val);
}
};
return (
<MuiSlider
aria-label='Slider'
defaultValue={defaultValue}
value={value}
marks={marks}
min={min}
max={max}
onChangeCommitted={handleChange}
step={step ?? null}
valueLabelDisplay={valueLabelDisplay}
sx={sliderStyles}
/>
);
}
|