@lunit/oui
Version:
Lunit Oncology UI components
73 lines (72 loc) • 2.75 kB
JavaScript
import { Box, Slider, styled } from '@mui/material';
import theme from '../../theme';
export const Container = styled(Box)({
display: 'flex',
flexDirection: 'column',
gap: '12px',
});
export const BaseSlider = styled(Slider, {
shouldForwardProp: (prop) => prop !== 'defaultThreshold',
})(({ defaultThreshold, marks, disabled }) => {
let markIndex = 0;
if (Array.isArray(marks) && marks.length > 0) {
markIndex = marks.findIndex((mark) => mark.value === defaultThreshold);
}
const defaultThresClass = `&:nth-of-type(${markIndex + 4})`;
const defaultLabelClass = `&:nth-of-type(${markIndex + 5})`;
return {
'& .MuiSlider-rail': {
background: theme.palette.neutralGrey[75],
height: '8px',
},
'& .MuiSlider-track': {
display: 'none',
},
'& .MuiSlider-thumb': {
background: theme.palette.neutralGrey[0],
'&:hover': {
boxShadow: `0px 0px 0px 8px rgba(255, 0, 0, 0.2)`,
},
'&.Mui-focusVisible': {
boxShadow: `0px 0px 0px 8px rgba(255, 0, 0, 0.2)`,
},
},
'& .MuiSlider-mark': {
background: theme.palette.neutralGrey[40],
height: '6px',
width: '6px',
borderRadius: '50%',
},
'& .MuiSlider-markLabel': {
fontFamily: 'Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
fontSize: '8px',
fontStyle: 'normal',
fontWeight: '500',
lineHeight: '12px',
},
'& .MuiSlider-valueLabel': {
fontFamily: 'Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
fontSize: '12px',
fontWeight: '700',
lineHeight: '16px',
background: 'unset',
padding: 0,
width: 32,
height: 32,
borderRadius: '50% 50% 50% 0',
backgroundColor: disabled ? theme.palette.neutralGrey[60] : theme.palette.lunitTeal[40],
transformOrigin: 'bottom left',
transform: 'translate(50%, -100%) rotate(-45deg) scale(0)',
'&:before': { display: 'none' },
'&.MuiSlider-valueLabelOpen': {
transform: 'translate(50%, -100%) rotate(-45deg) scale(1)',
},
'& > *': {
transform: 'rotate(45deg)',
},
'&.Mui-disabled': {
visibility: 'visible',
},
},
};
});