Before & After Slider

Use this module to display two outcomes of one image and allow users to see both by dragging an interactive slider between the two views. 

Customization Available:

  • Custom Label Names
  • Horizontal and Vertical Orientations
  • Offset the Slider
  • Circle or Square Handle
  • Custom Color Slider Bar

  • Before After Slider - Style 1

  • Before After Slider - Style 2

Before After Slider - Style 1

  • Orientation: Horizontal
  • Slider Offset: 0.7 (top slider), 0.3 (bottom slider)
  • Handle Shape: Circle

Below example showing the horizontal orientation of the slider with a circular handle.
Drag the slider sideways to see the before and after (better on mobile).

WINTER SUMMER
WINTER SUMMER

Before After Slider - Style 2

  • Orientation: Vertical
  • Slider Offset: 0.7 (left slider), 0.3 (right slider)
  • Handle Shape: Square

Below example showing the vertical orientation of the slider with a square handle.
Drag the slider up and down to see the before and after.

BEFORE AFTER
BEFORE AFTER