Demo

  • HEROES & NAV

    • Hero Sections
    • Bold Heroes
    • Breadcrumbs
    • Banner Patterns
    • Floating Bars

    SOCIAL PROOF

    • Single Reviews
    • Multi Reviews
    • Multi Reviews (Alt)
    • Testimonial Sliders
    • Logo Grids
    • Stats & Counters

    CONTENT

    • Simple Post
    • Advanced Post
    • Modern Post
    • Timeline
    • Team Sections
    • Changelog
    • Careers
    • Events

    FORMS & FEEDBACK

    • CTA Sections
    • Contact Forms
    • Newsletter
    • Cookie Consent
    • Toasts

    FEATURES

    • 3 Card features
    • 4 Card Features
    • 6 Card Features
    • Feature Blocks
    • Process

    INTERACTIVE

    • Toggle Panels
    • Tabbed Sections
    • Video Lightboxes
    • Swiper Sliders
    • Vertical Sliders
    • Thumbnail Siders
    • Marquee Tickers
    • Before / After

    COMMERCE & DATA

    • Pricing Sections
    • Comparation Tables
    • Data tables

    LAYOUT

    • Footer Sections
    • Image Grids
    • Empty States
    • 404 Pages

    NAVIGATION

    • Navigation Bars

    MEDIA

    • Image Block
    • Icon Block
    • Video Block
    • Video Lightbox Block
    • Avatar Block

    DISPLAY

    • Badge Block
    • Tag Block
    • Tooltip Block
    • Card Block
    • Divider Block
    • Breadcrumb Block

    Layout

    • Grid Block
    • Flex Block
    • Absolute Box Block

    TYPOGRAPHY

    • Heading Block
    • Paragraph Block
    • List Block
    • Blockquote Block

    INTERACTIVE

    • Button Block
    • Link Button Block
    • Accordion Block
    • Tabs Block
    • Slider Block
    • Thumbnail Slider Block
    • Marquee Block
    • Before After Slider Block

    DATA & CCOMMERCE

    • Data Table Block
    • Pricing Block
    • Progress Block
    • Timeline Block

    FORMS

    • Contact Form Block

    TECH & SAAS

    • Helios
    • Tempo
    • Verso
    • Ledge Finance

    TRAVEL & LEISURE

    • Meridian
    • Traverse
    • Vela
    • Wildpath
    • Poseidon

    HOSPITALITY

    • Wineatic
    • Trattoria Sole
    • Santa Lucia

    SERVICES & DESIGN

    • Kova
    • Haven Studio
    • Volta
    • Pxlcraft
    • Apex Agency

    SPECIALITY

    • Bright Smile
    • Dentist Modern
    • Bento
  • Ecommerce
  • Docs
Websites
Patterns
HEROES & NAV
Hero SectionsBold HeroesBreadcrumbsBanner PatternsFloating Bars
SOCIAL PROOF
Single ReviewsMulti ReviewsMulti Reviews (Alt)Testimonial SlidersLogo GridsStats & Counters
CONTENT
Simple PostAdvanced PostModern PostTimelineTeam SectionsChangelogCareersEvents
FORMS & FEEDBACK
CTA SectionsContact FormsNewsletterCookie ConsentToasts
FEATURES
3 Card features4 Card Features6 Card FeaturesFeature BlocksProcess
INTERACTIVE
Toggle PanelsTabbed SectionsVideo LightboxesSwiper SlidersVertical SlidersThumbnail SidersMarquee TickersBefore / After
COMMERCE & DATA
Pricing SectionsComparation TablesData tables
LAYOUT
Footer SectionsImage GridsEmpty States404 Pages
Blocks
NAVIGATION
Navigation Bars
MEDIA
Image BlockIcon BlockVideo BlockVideo Lightbox BlockAvatar Block
DISPLAY
Badge BlockTag BlockTooltip BlockCard BlockDivider BlockBreadcrumb Block
Layout
Grid BlockFlex BlockAbsolute Box Block
TYPOGRAPHY
Heading BlockParagraph BlockList BlockBlockquote Block
INTERACTIVE
Button BlockLink Button BlockAccordion BlockTabs BlockSlider BlockThumbnail Slider BlockMarquee BlockBefore After Slider Block
DATA & CCOMMERCE
Data Table BlockPricing BlockProgress BlockTimeline Block
FORMS
Contact Form Block
Demos
TECH & SAAS
HeliosTempoVersoLedge Finance
TRAVEL & LEISURE
MeridianTraverseVelaWildpathPoseidon
HOSPITALITY
WineaticTrattoria SoleSanta Lucia
SERVICES & DESIGN
KovaHaven StudioVoltaPxlcraftApex Agency
SPECIALITY
Bright SmileDentist ModernBento
EcommerceDocs
On This Page
Before/After BlockComparison ModeImagesLabelsHeight & Border RadiusSpacingAll Available Controls
Blocks
Grid Block
Grid Item Block
Flex Block
Absolute Block
Heading Block
Paragraph Block
List Block
Image Block
Icon Block
Video Block
Video Lightbox Block
Button Block
Accordion Block
Tabs Block
Slider Block
Slider Item Block
Thumbnail Slider
Thumbnail Slider Item
Marquee Block
Marquee Item Block
Before / After
Data Table Block
Pricing Card Block
Progress Bar Block
Timline Block
Header Block
Simple Header
Advanced Header
Advanced Header Featured
Float Header
Blog Listing Block
Separator Block
Contact Form Block
Docs

/

Before/After Block

Before/After Block

An image comparison slider. Upload two images and let users drag a handle to reveal the difference. Supports horizontal drag, vertical drag, or click-to-toggle modes.

INTERACTIVE PREVIEW

Before
After

When to use this block

  • Design before/after comparisons (redesigns, retouching)
  • Product results (cleaning, restoration, fitness)
  • Performance or quality improvements

Comparison Mode

Choose how users interact with the comparison.

Horizontal

Drag left ↔ right

Vertical

Drag up ↔ down

Toggle

Click to switch

Images

Upload two images from the media library. Both images should have the same dimensions for best results.

Images

Sidebar Panel

Before Image

before.jpg

Before Alt

Original design

After Image

after.jpg

After Alt

Redesigned version

Labels

Customize the “Before” and “After” label text, colors, and typography. Each label has its own background and text color.

Labels

Sidebar Panel

Before Text

Before

Before Bg

dark

Before Text Color

dark

Aftter Text

After

After Bg

light

After Text Color

#171717

Font Size

—

px

Font Weight

—

LABEL STYLES

Before

Dark bg, white text

After

Light bg, dark text

Custom

Brand-colored labels

Font size is responsive (3 breakpoints). Weight is not responsive.

Height & Border Radius

Set the block height in pixels (responsive). Per-corner border radius on the slider container (responsive).

Size

Sidebar Panel

Height

450

px

Both height and radius are responsive: Mobile Tablet Desktop

Spacing

Padding and margin. Both use per-breakpoint objects.

Responsive: Mobile Tablet Desktop

All Available Controls

Comparison Mode Horizontal, vertical, toggle

sliderType: "horizontal" (default, drag left/right), "vertical" (drag up/down), "toggle" (click to switch). Horizontal/vertical use a drag handle with role="slider". Toggle uses a button.

Images Before + after upload, alt text

beforeImageUrl/beforeImageId/beforeImageAlt and afterImageUrl/afterImageId/afterImageAlt. Use same-dimension images for best results.

Labels Text, bg/text color per side, typography

beforeLabel/afterLabel (default "Before"/"After"). beforeLabelBgColor/beforeLabelTextColor and afterLabelBgColor/afterLabelTextColor. labelFontSize/labelLineHeight (+Md/Lg). labelFontWeight (not responsive).

Height & Radius Block height + per-corner radius, responsive

height (+Md/Lg): default 450px. borderRadiusMobile/Tablet/Desktop: per-corner objects. Both applied to .ba-slider which always has overflow: hidden.

Toggle Button Colors for toggle mode only

toggleBtnBgColor/toggleBtnTextColor: only affects the click-to-toggle button. Has no effect in horizontal/vertical drag modes.

Spacing Padding & margin, responsive objects

paddingMobile/Tablet/Desktop and marginMobile/Tablet/Desktop: per-breakpoint objects with top/right/bottom/left.

Related Blocks

Image Block

For standalone images with object-fit, radius, and overlay controls.

Slider Block

For sequential image/content carousels rather than side-by-side comparison.

Brandname

Building tools that help teams move faster, ship better, and stay aligned.

Product

  • Features
  • Pricing
  • Integrations
  • Changelog

Company

  • About
  • Blog
  • Careers
  • Press

Resources

  • Documentation
  • API Reference
  • Support
  • Status

© 2026 Brandname. All rights reserved.

Privacy Policy
Terms of Service