Compariison_slider
A Before/After comparison slider. You drop in two visuals (image or video) and get a draggable divider so people can slide and compare “before” vs “after.” Multifunctional.
Make it with Workshop
Build your own component with AI
About this Component
A Before/After comparison slider for Framer. You drop in two visuals (image or video) and get a draggable divider so people can slide and compare “before” vs “after.” It works horizontally or vertically, has an optional round handle with an icon, and you can show labels like “Before” and “After” and style them as desired.
Key Features
Media types per side: image or video (autoplay/loop/muted for video).
Direction: horizontal (left↔right) or vertical (top↕bottom) split.
Starting position: where the divider sits initially (0–100%).
Divider: color and thickness.
Handle: show/hide, size, color, and icon.
Use a built-in icon (lots of choices) or upload your own.
Corner radius: rounded corners on the whole component.
Labels: show/hide “Before / After,” choose text, font, color, text-transform, and position (top/middle/bottom + left/center/right) with inset spacing per label.
