@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.18 kB
JavaScript
import{styled as i,Slider as e}from"@mui/material";import{space as r}from"../../BrandCore/primitiveVariables.js";import{sliderHandle as l}from"./sliderHandle.js";import{sliderTrack as a}from"./sliderTrack.js";import{sliderValue as o}from"./sliderValue.js";const t=i(e,{shouldForwardProp:i=>!["inputRef","hideMarks","hideMarkLabels"].includes(i)})(({theme:i,value:e,hideMarkLabels:t,hideMarks:d})=>({"&.MuiSlider-root":{width:`calc(100% - ${r[400]}px)`,marginLeft:r[400]/2,...{...a(i,e)},...{...l(i)},...{...o(i)},"&.Mui-disabled":{"& .MuiSlider-rail, & .MuiSlider-track":{backgroundColor:i.custom.palette.icon.secondary},"& .MuiSlider-rail":{backgroundColor:i.custom.palette.icon.disabled},"& .MuiSlider-thumb":{backgroundColor:i.custom.palette.icon.disabled,"& .MuiSlider-valueLabel":{backgroundColor:i.custom.palette.icon.disabled}}},...t&&{".MuiSlider-markLabel":{visibility:"hidden"},".MuiSlider-markLabel:nth-of-type(4), .MuiSlider-markLabel:nth-last-of-type(2)":{visibility:"visible"}},".MuiSlider-mark":{color:i.custom.palette.text.secondary,...d&&{visibility:"hidden"},"&.MuiSlider-markLabelActive":{color:i.custom.palette.text.secondary}}}}));export{t as StyledSlider};