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.
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
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
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
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.
Hugo Marques
