{
  "version": 3,
  "sources": ["ssg: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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",
  "names": ["ImageSlider", "props", "beforeImage", "afterImage", "sliderThumbImage", "showDivider", "dividerColor", "dividerThickness", "sliderSize", "interactionType", "transition", "sliderValue", "setSliderValue", "ye", "sliderRef", "pe", "isDragging", "calculateSliderValue", "te", "clientX", "rect", "offsetX", "handleStart", "event", "handleMove", "moveEvent", "moveClientX", "handleEnd", "handleHover", "window", "u", "p", "motion", "addPropertyControls", "ControlType"]
}