{"version":3,"file":"ImageSlider2.BgdYKByn.mjs","names":["React.useState","React.useRef","React.useCallback"],"sources":["https:/framerusercontent.com/modules/z8kjwh8hhAtEqUV8Dlkp/NL06mui94JAKshCZAOLI/ImageSlider2.js"],"sourcesContent":["import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType}from\"framer\";import{motion}from\"framer-motion\";/**\n * @framerDisableUnlink\n *\n * @framerSupportedLayoutWidth any-prefer-fixed\n * @framerIntrinsicWidth 600\n * @framerSupportedLayoutHeight any-prefer-fixed\n * @framerIntrinsicHeight 400\n */export default function ImageSlider(props){const{beforeImage,afterImage,sliderThumbImage,showDivider,dividerColor,dividerThickness,sliderSize,interactionType,transition}=props;const[sliderValue,setSliderValue]=React.useState(50);const sliderRef=React.useRef(null);const isDragging=React.useRef(false);const calculateSliderValue=React.useCallback(clientX=>{if(!sliderRef.current)return;const rect=sliderRef.current.getBoundingClientRect();const offsetX=clientX-rect.left;return Math.min(Math.max(offsetX/rect.width*100,0),100);},[]);const handleStart=React.useCallback(event=>{event.preventDefault();event.stopPropagation();isDragging.current=true;const clientX=event.type.startsWith(\"touch\")?event.touches[0].clientX:event.clientX;setSliderValue(calculateSliderValue(clientX));const handleMove=moveEvent=>{if(!isDragging.current)return;moveEvent.preventDefault();moveEvent.stopPropagation();const moveClientX=moveEvent.type.startsWith(\"touch\")?moveEvent.touches[0].clientX:moveEvent.clientX;setSliderValue(calculateSliderValue(moveClientX));};const handleEnd=()=>{isDragging.current=false;document.removeEventListener(\"mousemove\",handleMove,{passive:false});document.removeEventListener(\"mouseup\",handleEnd);document.removeEventListener(\"touchmove\",handleMove,{passive:false});document.removeEventListener(\"touchend\",handleEnd);};// Remove the interactionType check to allow dragging in both modes\ndocument.addEventListener(\"mousemove\",handleMove,{passive:false});document.addEventListener(\"mouseup\",handleEnd);document.addEventListener(\"touchmove\",handleMove,{passive:false});document.addEventListener(\"touchend\",handleEnd);},[calculateSliderValue]);const handleHover=React.useCallback(event=>{// Only apply hover effect on desktop\nif(interactionType===\"hover\"&&!isDragging.current&&window.matchMedia(\"(hover: hover)\").matches){const clientX=event.type.startsWith(\"touch\")?event.touches[0].clientX:event.clientX;setSliderValue(calculateSliderValue(clientX));}},[interactionType,calculateSliderValue]);// Previous imports and configuration remain the same\n// The main change is in the slider container div style and position\nreturn /*#__PURE__*/_jsxs(\"div\",{ref:sliderRef,style:{position:\"relative\",width:\"100%\",height:\"100%\",overflow:\"hidden\",touchAction:\"none\",WebkitUserSelect:\"none\",userSelect:\"none\",cursor:\"pointer\"},onMouseDown:handleStart,onTouchStart:handleStart,onMouseMove:handleHover,onTouchMove:handleHover,role:\"slider\",\"aria-valuenow\":sliderValue,\"aria-valuemin\":\"0\",\"aria-valuemax\":\"100\",tabIndex:\"0\",children:[/*#__PURE__*/_jsx(motion.div,{initial:{clipPath:`inset(0 50% 0 0)`},animate:{clipPath:`inset(0 ${100-sliderValue}% 0 0)`},transition:transition,style:{position:\"absolute\",top:0,left:0,width:\"100%\",height:\"100%\",touchAction:\"none\"},children:/*#__PURE__*/_jsx(\"img\",{src:beforeImage,style:{width:\"100%\",height:\"100%\",objectFit:\"cover\",touchAction:\"none\",pointerEvents:\"none\",WebkitUserDrag:\"none\",userDrag:\"none\"},alt:\"Before\",draggable:false})}),/*#__PURE__*/_jsx(motion.div,{initial:{clipPath:`inset(0 0 0 50%)`},animate:{clipPath:`inset(0 0 0 ${sliderValue}%)`},transition:transition,style:{position:\"absolute\",top:0,right:0,width:\"100%\",height:\"100%\",touchAction:\"none\"},children:/*#__PURE__*/_jsx(\"img\",{src:afterImage,style:{width:\"100%\",height:\"100%\",objectFit:\"cover\",touchAction:\"none\",pointerEvents:\"none\",WebkitUserDrag:\"none\",userDrag:\"none\"},alt:\"After\",draggable:false})}),showDivider&&/*#__PURE__*/_jsx(motion.div,{initial:{left:\"50%\"},animate:{left:`${sliderValue}%`},transition:transition,style:{position:\"absolute\",top:0,width:dividerThickness,height:\"100%\",backgroundColor:dividerColor,transform:\"translateX(-50%)\",pointerEvents:\"none\",zIndex:1}}),/*#__PURE__*/_jsx(motion.div,{initial:{left:\"50%\"},animate:{left:`${sliderValue}%`},transition:transition,style:{width:`${sliderSize}px`,height:`${sliderSize}px`,backgroundImage:`url(${sliderThumbImage})`,backgroundSize:\"cover\",backgroundPosition:\"center\",position:\"absolute\",top:\"50%\",transform:\"translate(-50%, -50%)\",pointerEvents:\"none\",zIndex:2}})]});// Rest of the code remains the same\n}ImageSlider.defaultProps={beforeImage:\"https://images.unsplash.com/photo-1497250681960-ef046c08a56e?w=800&auto=format&fit=crop&q=60\",afterImage:\"https://images.unsplash.com/photo-1507048331197-7d4ac70811cf?w=800&auto=format&fit=crop&q=60\",sliderThumbImage:\"https://nlbllifiywwihhynrcgn.supabase.co/storage/v1/object/public/SegmentUIAssets/arrowdirectional.png\",showDivider:true,dividerColor:\"#ffffff\",dividerThickness:\"1px\",sliderSize:75,interactionType:\"hover\",transition:{type:\"spring\",bounce:0,duration:.01}};addPropertyControls(ImageSlider,{beforeImage:{title:\"Before Image\",type:ControlType.Image},afterImage:{title:\"After Image\",type:ControlType.Image},sliderThumbImage:{title:\"Slider Thumb\",type:ControlType.Image},interactionType:{title:\"Interaction\",type:ControlType.Enum,options:[\"click\",\"hover\"]},showDivider:{title:\"Show Divider\",type:ControlType.Boolean},dividerColor:{title:\"Divider Color\",type:ControlType.Color},dividerThickness:{title:\"Divider Width\",type:ControlType.Number,unit:\"px\",min:0,max:10,step:.1},sliderSize:{title:\"Slider Size\",type:ControlType.Number,unit:\"px\",min:10,max:200,step:1},transition:{type:ControlType.Transition,title:\"Transition\",description:\"v1.2 \\n[via SegmentUI](https://www.segmentUI.com)\"}});ImageSlider.displayName=\"Before After Slider\";\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"ImageSlider\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerDisableUnlink\":\"*\",\"framerIntrinsicWidth\":\"600\",\"framerIntrinsicHeight\":\"400\",\"framerSupportedLayoutWidth\":\"any-prefer-fixed\",\"framerSupportedLayoutHeight\":\"any-prefer-fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./ImageSlider2.map"],"mappings":"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"}