← 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
After
Before
Before After
After
Before
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
After
Before
After
Before
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
After
Before
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