10 Best Framer Before and After Slider Components in 2026

MDX_BASlider is the most complete paid framer before after slider on this list: switch between vertical left-right and horizontal top-bottom orientation from one property panel, with clip-path, drag axis, and keyboard arrows adapting automatically. A single accent color drives the divider, thumb grip, badge labels, and focus ring, while scroll-triggered reveal animation sweeps the handle on viewport entry before settling at your chosen start position. At 19 USD it replaces the glass UI, momentum spring, and ARIA slider bundle agencies rebuild on every transformation showcase.

The Before & After Slider plugin is the only free plugin on this list and the most configurable option overall — static or handle-attached labels, per-image CSS filters, portrait mode, follow-hover scrubbing, keyboard stepping, and reset-on-leave all ship from the plugin panel. Built on react-compare-slider, it handles transparent PNG comparisons with clip-side controls that pure frame stacks cannot match. Install it when you need pixel-level knob styling and image effects without committing to a single marketplace component aesthetic.

Image + Photo Slider covers the interaction modes most case-study pages actually use: horizontal or vertical layout, drag handle or hover scrub, and fully editable label pairs beyond generic Before/After copy. Aidan Looker exposes radius, divider width, label colors, and a modern “Slide between images” hint pill through native property controls — no overrides required. At 7 USD it is the best mid-tier pick when you want polished defaults and dual interaction modes without MODAX-level glass chrome.

Compariison_slider handles what most image-only sliders ignore: each side accepts an image or an autoplaying muted video, so renovation timelapses and fitness transformations work in one component. Horizontal and vertical split direction, configurable starting position, round handle with icon choices, and nine-point label placement cover the standard comparison workflow. At 8 USD it is the strongest pick when your before-and-after story is motion, not just static screenshots.

Desygnative’s Before After Slider focuses on presentation polish: arrow or chevron handle icons inside round or square containers, initial slider position control, and built-in fallback text when images are missing — details that matter on client-facing case-study pages. Image inputs, icon padding, background fills, and component corner radius all live in the property panel for fast brand matching. At 11 USD it suits marketers who want a refined default look without configuring a plugin from scratch.

Comparison Slider is the CMS-first pick on this list: bind before and after images directly from Framer CMS so each case-study entry renders its own comparison without duplicating components. Horizontal and vertical variants, custom handle icons, hover scaling, alt text, ARIA labels, and adjustable keyboard step size cover accessibility requirements agencies increasingly specify in handoff docs. At 5 USD it is the default when your comparison gallery is data-driven rather than a single hero block.

BeforeAfterSlider toggles between photo and video modes so one component covers static redesign screenshots and short motion clips. Ionut Zamfir adds a custom handle image upload and a sleek blur effect along the divider that makes the scrub interaction feel more cinematic than flat clip-path reveals. At 5 USD it is the best value when you need video support and brand-specific handle artwork without the broader preset library of the free alternatives lower on this list.

Free Before-After from Zlatko Marjanović packs six interaction presets into one free install: drag slider, hover scrub, click toggle, auto loop, scroll reveal, and 3D flip. Image and video comparison, alt text support, glass-style labels, and configurable divider orientation cover most marketing-page scenarios at zero cost. With 88 marketplace installs it is the free baseline every builder should try before spending on paid sliders — especially when you want to A/B interaction modes on the same before-and-after assets.

Before After Pro targets production-grade polish: a dual-container architecture keeps custom shadows intact and unclipped, which matters on dark portfolio layouts where drop shadows define card depth. Toggle between drag and hover interaction, with arrow-key, Home, and End keyboard navigation and native touch handling for mobile. Axel Fouley ships it free, making it the sensible second free install when Zlatko’s preset library is more than you need but accessibility and shadow fidelity still matter.

BeforeSwipe is the lowest-cost paid option on this list at 2 USD — a straightforward drag-to-compare slider with touch and mouse support, adjustable starting position, optional before/after labels, and responsive image scaling. Ævar Bernburg keeps the scope tight: no video modes, no CMS bindings, no scroll-reveal choreography — just a reliable comparison interaction for interior renovations, photo edits, and product demos. Install it when the project needs a working framer before after slider and the budget line item cannot exceed a coffee.