{"version":3,"file":"ImageSlider2.91ZeOp4l.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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"}