A premium image comparison slider for Framer with horizontal & vertical layouts, drag or hover interaction, and beautiful defaults that work out of the box.
Make it with Workshop
Build your own component with AI
Photo & Image Slider is a refined image comparison component for Framer.
Compare any two states—design vs redesign, day vs night, raw vs edited, before vs after—with a smooth, responsive handle in both horizontal and vertical layouts, using either drag or hover interaction.
The component ships with curated default images so it looks polished the moment you drop it on the canvas.
You get clear, fully editable labels, a modern “Slide between images” hint pill, and precise masking so the divider always aligns perfectly with the handle.
Every detail—from radius and divider width to label text, colors, and hint copy—is exposed as a Framer property control, so you can adapt it to any brand, use case, or layout in seconds.
Horizontal & vertical modes – Switch direction with a single control for landscape or portrait layouts.
Drag or hover interaction – Let users drag the handle or simply hover to scrub between images.
Fully custom labels – Editable labels for any comparison: Before/After, Light/Dark, V1/V2, Raw/Edited, and more.
Modern helper hint – Optional “Slide between images” pill.
Smooth, polished motion – Eased transitions for the handle, divider, and mask so the interaction feels premium on both desktop and touch.
Touch‑friendly – Works seamlessly with mouse and touch input.
Framer‑native controls – Built responsively and with property controls; no overrides or extra code required.