# Before After Image Slider

> Learn how to build and configure the Before/After Image Slider component in PandaSuite, enabling image comparison with customizable properties like line color and handle visibility.

https://docs.pandasuite.com/essentials/components/before-after-image-slider/

**Discover how to build a Before/After comparison slider between two images.**

[Video: on a phone, the slider is dragged back and forth between an old drawing of the Eiffel Tower and a current photo]

Insert the **Before/After Slider** component from the list of components. In the properties, choose the left and right images. Make sure they are the same size.

[Image: Before/After Slider component properties, with the right image and left image fields highlighted]

To view the before/after image, you must go inside the component. Double-click on the component area.

[Image: Before After Slider opened by a double-click: its name, framed in the breadcrumb, the winter and spring beds on screen, and its properties]

Here are the properties of the Before/After Slider component:

- **Vertical:** choose if your cursor is placed vertically or horizontally
- **Line color:** choose the color of your line
- **Line width:** choose the width of the line.
- **Handle:** display or not the handle of the cursor

You can add one or more [markers](https://docs.pandasuite.com/essentials/interactions/markers/) to trigger actions and go to a location. It is also possible to [synchronize](https://docs.pandasuite.com/essentials/components/synchronization/) this before/after image with another component.

> **Info**
>
> If you don't want to display the cursor, remove the handle and set the line
> width to 0.