@unicity/design-system
Version:
A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support
52 lines • 1.59 kB
JavaScript
import { styled } from '@mui/material/styles';
import { Slider, Box } from '@mui/material';
export const SliderContainer = styled(Box)(({ theme }) => ({
width: '100%',
padding: theme.spacing(1, 0),
}));
export const StyledSlider = styled(Slider)(({ theme }) => ({
'& .MuiSlider-thumb': {
'&:hover, &.Mui-focusVisible': {
boxShadow: `0 0 0 8px ${theme.palette.primary.main}30`,
},
'&.Mui-active': {
boxShadow: `0 0 0 14px ${theme.palette.primary.main}30`,
},
},
'& .MuiSlider-track': {
borderRadius: theme.shape.borderRadius,
},
'& .MuiSlider-rail': {
borderRadius: theme.shape.borderRadius,
opacity: 0.3,
},
'& .MuiSlider-mark': {
backgroundColor: theme.palette.text.disabled,
width: 2,
height: 2,
borderRadius: '50%',
},
'& .MuiSlider-markActive': {
backgroundColor: 'currentColor',
},
'& .MuiSlider-markLabel': {
fontSize: theme.typography.caption.fontSize,
color: theme.palette.text.secondary,
top: 32,
},
'& .MuiSlider-valueLabel': {
fontSize: theme.typography.caption.fontSize,
fontWeight: theme.typography.fontWeightMedium,
top: -6,
backgroundColor: 'unset',
color: theme.palette.text.primary,
'&:before': {
display: 'none',
},
'& *': {
background: 'transparent',
color: theme.palette.mode === 'dark' ? '#fff' : '#000',
},
},
}));
//# sourceMappingURL=Slider.style.js.map