← Back to All Demos

Before / After

Draggable image comparison slider.

5
Variations
2
Directions
0
Dependencies
01

Variation 01

Horizontal, 50%

Default horizontal slider at center.

direction=horizontal
initial_position=50
show_labels=yes
handle_size=44
Modern white kitchen after renovation with quartz countertops
Dated 1990s kitchen with oak cabinets before renovation
Before After
Modern white kitchen after renovation with quartz countertops
Dated 1990s kitchen with oak cabinets before renovation
Before After
02

Variation 02

Vertical Direction

Vertical slider at 30% position.

direction=vertical
initial_position=30
show_labels=yes
handle_size=44
03

Variation 03

No Labels, Gold Handle

Clean look without labels, gold handle.

direction=horizontal
show_labels=no
handle_color=f59e0b
Modern white kitchen after renovation with quartz countertops
Dated 1990s kitchen with oak cabinets before renovation
Modern white kitchen after renovation with quartz countertops
Dated 1990s kitchen with oak cabinets before renovation
Before After
04

Variation 04

Large Handle + Radius

Large 60px handle with 16px radius.

handle_size=60
border_radius=16
show_labels=yes
05

Variation 05

Reversed Position (75%)

Starting position at 75%.

direction=horizontal
initial_position=75
show_labels=yes
Modern white kitchen after renovation with quartz countertops
Dated 1990s kitchen with oak cabinets before renovation
Before After

All Variations

01
Horizontal 50%
directionhorizontal
initial_position50
show_labelsyes
02
Vertical 30%
directionvertical
initial_position30
show_labelsyes
03
No Labels Gold
show_labelsno
handle_colorf59e0b
04
Large Handle
handle_size60
border_radius16
05
Reversed 75%
initial_position75

All Available Options

Direction
HorizontalVertical
Show Labels
YesNo
Other Controls
Before LabelAfter LabelBefore ImageAfter ImageSlider ColorSlider Width (px)Handle Size (px)