62:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/3gx96u50v9idb.js","/creators-assets/_next/static/immutable/chunks/125_ce2ese0y_.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/069_m7850i8jf.js","/creators-assets/_next/static/immutable/chunks/03586ab1rea-b.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0-lv0573a1cyl.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/24gcuxpvxd8dy.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3vd9_7_mqx0kl.js","/creators-assets/_next/static/immutable/chunks/3l37d07td4kzk.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3nw4q_evu8ge1.js","/creators-assets/_next/static/immutable/chunks/3o5qsyzxffd89.js","/creators-assets/_next/static/immutable/chunks/0sdd6rzuigoor.js","/creators-assets/_next/static/immutable/chunks/04onqby6uwgz7.js","/creators-assets/_next/static/immutable/chunks/16d5vpfsnfybw.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/0yulab_mho2q7.js","/creators-assets/_next/static/immutable/chunks/3_6nvj55e699g.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/0pc9t50m5x90i.js","/creators-assets/_next/static/immutable/chunks/3fyhezch4qqad.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0v2aom8xv86j9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0s-n7u5-dwtml.js"],"S"] 63:T994,

Compare Slider

Compare Slider is a premium, fully customizable Before & After image comparison component for Framer. Create smooth, interactive image comparisons for renovations, photography, product showcases, landscaping, beauty, healthcare, automotive, and more.

Built with performance and flexibility in mind, every part of the component can be customized directly from Framer's Properties panel—no code editing required.

Features

Smooth drag interaction with mouse & touch support
Fully responsive for desktop, tablet & mobile
Adjustable default slider position
Drag sensitivity control
Smooth drag toggle
Spring animation with adjustable stiffness & damping
Multiple handle shapes
Custom handle size, fill, border, shadow & opacity
Built-in icon styles with editable size & color
Optional divider with customizable width & color
Border radius, border, background & shadow controls
Image Fit (Cover, Contain, Fill)
Image alignment options
Optional hover effects
Cursor customization
Keyboard accessibility support
Lightweight, production-ready code

Fully Customizable

Customize everything from the Properties panel:

Before & After images
Slider position
Animation
Handle style
Icons
Divider
Border radius
Colors
Borders
Shadows
Background
Image fit & alignment
Hover effects
Cursor style

No coding required.

Perfect For

Home Renovation
Interior Design
Architecture
Photography
Product Comparison
Car Detailing
Landscaping
Dental & Medical
Beauty & Fitness
Portfolio & Agency Websites

Simply add the component, select your images, customize the design, and publish. Compare Slider delivers a clean, professional comparison experience that integrates seamlessly into any Framer project.

61:["$","$L62",null,{"value":{"fallback":{"$inf$activity-creator-2f6281da-80ab-47ed-ad0c-8ec9dd4c6902-all:/unified/creator/2f6281da-80ab-47ed-ad0c-8ec9dd4c6902/activity/":[{"data":[{"id":"019fcfe2-2b0f-760e-b9fb-d39f49ff684e","type":"creator.followed","target":{"type":"creator","id":"0f6c860b-0907-4253-89ed-a6bdc5564256","preview":"Artemis Studio","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0f6c860b-0907-4253-89ed-a6bdc5564256/2knuum9b","slug":"artemis-studio-bkyaa6","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2f6281da-80ab-47ed-ad0c-8ec9dd4c6902","name":"Ethan Brooks","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2658830/WREY3AzKT-DYt2Ttnbl5Qo1yYnX6ASBzW2bgxg9A","slug":"ethan-1brooks","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-05T03:05:33.708Z","latestAt":"2026-08-05T03:05:33.708Z"},{"id":"019fcb3d-3673-76bd-a9af-7bd57f06907e","type":"creator.followed","target":{"type":"creator","id":"10babd35-5d65-432b-a937-0d364862def7","preview":"Template Munk","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/987138/avatar-ab5H26kGpYaOYuIhN5LyueDxmZncxB.jpg","slug":"template-munk","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2f6281da-80ab-47ed-ad0c-8ec9dd4c6902","name":"Ethan Brooks","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2658830/WREY3AzKT-DYt2Ttnbl5Qo1yYnX6ASBzW2bgxg9A","slug":"ethan-1brooks","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-04T05:26:54.309Z","latestAt":"2026-08-04T05:26:54.309Z"},{"id":"019fcb04-33e2-73bb-9a4d-76976a7bf15a","type":"post.liked","target":{"type":"post","id":"019f8ab2-b524-75b4-8b17-edba68aa3be0","preview":"Designed this section to make visitors feel seen before they even scroll to the offer.\nWIP @framer","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Designed this section to make visitors feel seen before they even scroll to the offer."}]},{"type":"paragraph","content":[{"type":"text","text":"WIP @framer"}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d9512955-c3e6-4d6e-a2d0-a969d8396921/019f8ab2-92fb-76af-842c-50d630da65c3.png","targetDeleted":false,"owned":false,"actions":{"postId":"019f8ab2-b524-75b4-8b17-edba68aa3be0","like":{"count":4,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"2f6281da-80ab-47ed-ad0c-8ec9dd4c6902","name":"Ethan Brooks","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2658830/WREY3AzKT-DYt2Ttnbl5Qo1yYnX6ASBzW2bgxg9A","slug":"ethan-1brooks","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-04T04:24:38.111Z","latestAt":"2026-08-04T04:24:38.111Z"},{"id":"019fcb04-2dc0-70fc-affd-9329cde4485f","type":"post.liked","target":{"type":"post","id":"019f9597-1a3f-715a-b090-083bf6dbf4a5","preview":"Added animation✨","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Added animation"},{"type":"emoji","attrs":{"name":"sparkles","emoji":"✨"}}]}]},"thumbnail":"https://image.mux.com/3Pz4qd01ZyYzK9S5CeqaftmYYlfkdoIUZHUu01N00VexxI/thumbnail.webp?time=3.864","targetDeleted":false,"owned":false,"actions":{"postId":"019f9597-1a3f-715a-b090-083bf6dbf4a5","like":{"count":6,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"2f6281da-80ab-47ed-ad0c-8ec9dd4c6902","name":"Ethan Brooks","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2658830/WREY3AzKT-DYt2Ttnbl5Qo1yYnX6ASBzW2bgxg9A","slug":"ethan-1brooks","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-04T04:24:36.538Z","latestAt":"2026-08-04T04:24:36.538Z"},{"id":"019fcb04-25ba-76a6-b8a6-7ef5920eb209","type":"post.liked","target":{"type":"post","id":"019f9eb6-3d14-761f-a9b8-f7b3253ce7ad","preview":"Social proof section for a wellness coaching brand. Clear numbers + real results to build trust and help visitors convert with confidence.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Social proof section for a wellness coaching brand. Clear numbers + real results to build trust and help visitors convert with confidence."}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d9512955-c3e6-4d6e-a2d0-a969d8396921/019f9eb6-2b52-73a1-870c-92c72dec9170.png","targetDeleted":false,"owned":false,"actions":{"postId":"019f9eb6-3d14-761f-a9b8-f7b3253ce7ad","like":{"count":8,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"2f6281da-80ab-47ed-ad0c-8ec9dd4c6902","name":"Ethan Brooks","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2658830/WREY3AzKT-DYt2Ttnbl5Qo1yYnX6ASBzW2bgxg9A","slug":"ethan-1brooks","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-04T04:24:34.486Z","latestAt":"2026-08-04T04:24:34.486Z"},{"id":"019fcb04-1d8f-72b8-abf2-69de9eb1c850","type":"component.liked","target":{"type":"component","id":"GCK4qWmCkGWIEeeZO5fu","preview":"Expand Rotate Button","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d9512955-c3e6-4d6e-a2d0-a969d8396921/019faa4a-a5cc-72cc-b8c8-f326966d776b.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2f6281da-80ab-47ed-ad0c-8ec9dd4c6902","name":"Ethan Brooks","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2658830/WREY3AzKT-DYt2Ttnbl5Qo1yYnX6ASBzW2bgxg9A","slug":"ethan-1brooks","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-08-04T04:24:32.395Z","latestAt":"2026-08-04T04:24:32.395Z"},{"id":"019fcb04-0c22-772e-93a6-0b14ec165108","type":"template.liked","target":{"type":"template","id":"70401","preview":"Rooted Nutri","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d9512955-c3e6-4d6e-a2d0-a969d8396921/019fb1a2-f9b2-70ed-84c8-83c81ef843c0.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2f6281da-80ab-47ed-ad0c-8ec9dd4c6902","name":"Ethan Brooks","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2658830/WREY3AzKT-DYt2Ttnbl5Qo1yYnX6ASBzW2bgxg9A","slug":"ethan-1brooks","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"template","visibility":"public","startedAt":"2026-08-04T04:24:27.933Z","latestAt":"2026-08-04T04:24:27.933Z"},{"id":"019fcb04-0428-7655-b141-356789f45e7c","type":"post.liked","target":{"type":"post","id":"019fc7e5-51b6-7646-8edf-cc769c09f6b2","preview":"Hero section for an author bookstore framer template. Clean and elegant design to help writers sell their books with a strong first impression.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero section for an author bookstore framer template. Clean and elegant design to help writers sell their books with a strong first impression."}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d9512955-c3e6-4d6e-a2d0-a969d8396921/019fc7e4-9bba-76e0-a5ac-29439c5eab64.png","targetDeleted":false,"owned":false,"actions":{"postId":"019fc7e5-51b6-7646-8edf-cc769c09f6b2","like":{"count":7,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":null,"actors":[{"id":"2f6281da-80ab-47ed-ad0c-8ec9dd4c6902","name":"Ethan Brooks","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2658830/WREY3AzKT-DYt2Ttnbl5Qo1yYnX6ASBzW2bgxg9A","slug":"ethan-1brooks","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-04T04:24:25.884Z","latestAt":"2026-08-04T04:24:25.884Z"},{"id":"019fcb03-f445-76ed-9ecd-d1f6f7629707","type":"creator.followed","target":{"type":"creator","id":"d9512955-c3e6-4d6e-a2d0-a969d8396921","preview":"Raduan","previewJson":null,"thumbnail":"https://framerusercontent.com/avatars/users/d9512955-c3e6-4d6e-a2d0-a969d8396921/FjhcstXHA","slug":"raduanux","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2f6281da-80ab-47ed-ad0c-8ec9dd4c6902","name":"Ethan Brooks","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2658830/WREY3AzKT-DYt2Ttnbl5Qo1yYnX6ASBzW2bgxg9A","slug":"ethan-1brooks","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-04T04:24:21.825Z","latestAt":"2026-08-04T04:24:21.825Z"},{"id":"019fc5b3-49cd-767a-974d-b7b1092e9e32","type":"creator.followed","target":{"type":"creator","id":"daebf60b-d183-4dc3-9ee8-f5b070d8d8b4","preview":"Sidhanth Suman","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/64229/avatar-6Fkzk5vt1plyb4srBNDlylzUVliRDh.jpg","slug":"sidhanth-suman","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2f6281da-80ab-47ed-ad0c-8ec9dd4c6902","name":"Ethan Brooks","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2658830/WREY3AzKT-DYt2Ttnbl5Qo1yYnX6ASBzW2bgxg9A","slug":"ethan-1brooks","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-03T03:38:09.216Z","latestAt":"2026-08-03T03:38:09.216Z"},{"id":"019fbc81-fcb4-76c6-a80a-f4321d13a6cc","type":"creator.followed","target":{"type":"creator","id":"31d29df6-8059-4253-b5b7-252346f06bd6","preview":"Jabel","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/774205/avatar-Nct6RbpIMcRNaGX5CEbB24fuTsDQCw.jpg","slug":"jabel","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2f6281da-80ab-47ed-ad0c-8ec9dd4c6902","name":"Ethan Brooks","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2658830/WREY3AzKT-DYt2Ttnbl5Qo1yYnX6ASBzW2bgxg9A","slug":"ethan-1brooks","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-01T08:47:43.218Z","latestAt":"2026-08-01T08:47:43.218Z"},{"id":"019fbc7a-7b55-7529-ab97-3936b09f68b1","type":"component.created","target":{"type":"component","id":"2aEuD3bDCMv3IW6Rlei2","preview":"Before After Image","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2f6281da-80ab-47ed-ad0c-8ec9dd4c6902/019fbc5c-d2f0-747e-9793-1e18d962d7ff.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2f6281da-80ab-47ed-ad0c-8ec9dd4c6902","name":"Ethan Brooks","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2658830/WREY3AzKT-DYt2Ttnbl5Qo1yYnX6ASBzW2bgxg9A","slug":"ethan-1brooks","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-08-01T08:39:31.413Z","latestAt":"2026-08-01T08:39:31.413Z"},{"id":"019fbc4b-89e7-7091-bcc3-f4fa6f82f1ba","type":"creator.followed","target":{"type":"creator","id":"2b33eac4-4422-4c15-ba75-80a068fa9086","preview":"Denis Turbin","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2b33eac4-4422-4c15-ba75-80a068fa9086/gogz3777","slug":"denis-turbin","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"2f6281da-80ab-47ed-ad0c-8ec9dd4c6902","name":"Ethan Brooks","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2658830/WREY3AzKT-DYt2Ttnbl5Qo1yYnX6ASBzW2bgxg9A","slug":"ethan-1brooks","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-01T07:48:14.925Z","latestAt":"2026-08-01T07:48:14.925Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:2f6281da-80ab-47ed-ad0c-8ec9dd4c6902:/unified/posts/?creator=2f6281da-80ab-47ed-ad0c-8ec9dd4c6902&with=reposts":[{"data":[{"id":"019fbc7a-79f7-7438-8104-3b3b796e35c8","title":null,"body":"

🚀 Excited to share my first Framer component! Before After Slider is a fully customizable image comparison component with smooth drag interaction, responsive design, touch support, and extensive property controls. Perfect for showcasing transformations in any Framer project.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}},{"type":"text","text":" Excited to share my first Framer component! Before After Slider is a fully customizable image comparison component with smooth drag interaction, responsive design, touch support, and extensive property controls. Perfect for showcasing transformations in any Framer project."}]}]},"author":{"framerUserId":"2f6281da-80ab-47ed-ad0c-8ec9dd4c6902","name":"Ethan Brooks","slug":"ethan-1brooks","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2658830/WREY3AzKT-DYt2Ttnbl5Qo1yYnX6ASBzW2bgxg9A","followed":false,"followsYou":false},"media":[],"resources":[{"id":"2aEuD3bDCMv3IW6Rlei2","resolved":true,"title":"Before After Image","body":"$63","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Compare Slider"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Compare Slider is a premium, fully customizable Before & After image comparison component for Framer. Create smooth, interactive image comparisons for renovations, photography, product showcases, landscaping, beauty, healthcare, automotive, and more."}]},{"type":"paragraph","content":[{"type":"text","text":"Built with performance and flexibility in mind, every part of the component can be customized directly from Framer's Properties panel—no code editing required."}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth drag interaction with mouse & touch support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully responsive for desktop, tablet & mobile"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable default slider position"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag sensitivity control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth drag toggle"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Spring animation with adjustable stiffness & damping"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Multiple handle shapes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom handle size, fill, border, shadow & opacity"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Built-in icon styles with editable size & color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional divider with customizable width & color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Border radius, border, background & shadow controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image Fit (Cover, Contain, Fill)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image alignment options"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional hover effects"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cursor customization"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Keyboard accessibility support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Lightweight, production-ready code"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Fully Customizable"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Customize everything from the Properties panel:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Before & After images"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Slider position"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Handle style"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Icons"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Divider"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Border radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Colors"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Borders"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Shadows"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Background"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image fit & alignment"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hover effects"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cursor style"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"No coding required."}]},{"type":"customHeading","content":[{"type":"text","text":"Perfect For"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Home Renovation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interior Design"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Architecture"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Photography"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product Comparison"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Car Detailing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Landscaping"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dental & Medical"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Beauty & Fitness"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio & Agency Websites"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Simply add the component, select your images, customize the design, and publish. Compare Slider delivers a clean, professional comparison experience that integrates seamlessly into any Framer project."}]}]},"introduction":"Customizable Before & After Slider","slug":"before-after-image","author":{"framerUserId":"2f6281da-80ab-47ed-ad0c-8ec9dd4c6902","name":"Ethan Brooks","slug":"ethan-1brooks","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2658830/WREY3AzKT-DYt2Ttnbl5Qo1yYnX6ASBzW2bgxg9A","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2f6281da-80ab-47ed-ad0c-8ec9dd4c6902/019fbc5c-d2f0-747e-9793-1e18d962d7ff.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1536,"height":831}}],"post":null,"createdAt":"2026-08-01T08:39:30.636Z","updatedAt":"2026-08-01T08:39:30.636Z","publishedAt":"2026-08-01T08:39:30.633Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://handsome-iris-710098.framer.app/","price":"5","paymentUrl":"https://contra.com/payment-link/SyixfGTQ-before-after-slider","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"suvMVNiUyPVEPt19GtQQ","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-01T08:39:31.063Z","updatedAt":"2026-08-01T08:39:31.063Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L64"}]