NewNew in Beta: Website Preview in BreakUI Pro v2.0.22. Next up: Review Wall element.See updates →
Skip to main content
Layout and motion

Before / After Slider for Breakdance

A before and after comparison with a draggable handle. Show the work, not just describe it.

4 styles Pro Native Breakdance element No library needed

4 ways to style it

1Horizontal dragDrag the handle.
Horizontal drag
Before After
2VerticalSlide up and down.
Vertical
Before After
3Follow cursorMoves with the pointer, line handle.
Follow cursor
Before After
4Square handleSquare handle, labels at the bottom.
Square handle
Before After

In the editor

Before / After Slider element Content tab in the Breakdance editor
1 Content tab
Before / After Slider element Design tab in the Breakdance editor
2 Design tab
How to use it

Three steps to your first Before After Slider.

1

Add the element

Add Before After Slider from the BreakUI Pro group on your page.

2

Choose two images

Pick the before and after images from the media library and add labels if you like.

3

Style the handle

Set a horizontal or vertical split, the start position and the handle and line colors.

Quick answers.

Common questions about Before After Slider.

Still have a question?

Ask me directly on WhatsApp.

Chat on WhatsApp

Does it work on touch screens?

Yes. Visitors can drag with a finger, and use the arrow keys on a keyboard.

Do the images need the same size?

Use two images with the same ratio for the cleanest result. The slider keeps that ratio as the page resizes.

Does it slow the page down?

No. Images load lazily and the script only loads on pages that use the element.

Is it included in BreakUI Pro?

Yes. It is one of the 8 elements in BreakUI Pro, $29 for unlimited sites.

Get BreakUI Pro for $29.

Install it in a minute and have your first element on the page before your coffee cools.

$29, unlimited sites

Version 2.0.22, 714 KB

  • 8 elements, more on the roadmap
  • One license, unlimited sites and client sites
Get it for $29

See it live

Moniruzzaman Monir

Hire Monir

Available for new projects
What do you need?
Prefer to talk? Book a 30-min call