Image comparison

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.