Image comparison

Draggable before & after image slider

Before After Slider lets you showcase transformations, redesigns, photo edits, or any side-by-side comparison with a smooth drag interaction. Works on mouse and touch devices out of the box. Slider Set the starting position (0–100%) so the reveal begins exactly where you want Choose between horizontal or vertical orientation Control the divider line colour and thickness Handle Two handle styles: Circle Outline (frosted glass with backdrop blur) or Solid (filled) Full control over handle size , corner radius , and border width Toggle the optional frosted blur effect on the circle outline style Four built-in icons : Arrows, Chevrons, Lines, or None — each with independent icon size control Upload your own custom SVG icon to match your brand Icon colour automatically inverts against the handle fill for solid handles Labels Toggle Before / After labels on or off Fully editable label text Labels automatically fade out as the slider moves past them, so they never overlap the divider Style labels with Framer's native Font picker , Padding , Border , Border Radius , text colour , and background colour controls — the same controls you'd use on any Framer text or frame Framer-native controls throughout Property controls use native Framer types wherever possible — ControlType.Font, ControlType.Padding, ControlType.BorderRadius, and ControlType.Border — so everything feels right at home in the Framer design panel.

Draggable before & after image slider