import { ComponentSingleStyleConfig , ThemeComponentProps , } from "@chakra-ui/react" ; import { mode , orient } from "@chakra-ui/theme-tools" ; function thumbOrientation ( props ) { return orient ( { orientation : props . orientation , vertical : { left : "50%" , transform : "translateX(-50%)" , _active : { transform : "translateX(-50%) scale(1.15)" , } , } , horizontal : { top : "50%" , transform : "translateY(-50%)" , _active : { transform : "translateY(-50%) scale(1.15)" , } , } , } ) ; } const Slider = { baseStyle : { container : { _disabled : { opacity : 0.6 , pointerEvents : "none" , } , } , track : { borderRadius : "sm" , bg : mode ( "gray.50" , "whiteAlpha.200" ) , _disabled : { bg : mode ( "gray.50" , "#2C2E34" ) , } , } , thumb : { zIndex : 1 , borderRadius : "full" , bg : "white" , boxShadow : "base" , border : "2px solid" , borderColor : "transparent" , transition : "transform 0.2s" , _focus : { boxShadow : "base" } , _disabled : { bg : "gray.200" } , ... thumbOrientation , } , filledTrack : { bg : mode ( "#101010" , "#FFFFFF" ) , } , } , } ; export default Slider ;