# Before After (Paid)

{% hint style="success" %}
The Before After component is only available as a **paid product via the Element Store.**
{% endhint %}

The Before After Component is a premium comparison tool. It gives you a clean, responsive slider that lets visitors drag to compare two images, or any other content. It’s perfect for agencies, photographers, designers, architects, and anyone who needs a clear visual before-and-after effect.

{% embed url="<https://youtu.be/J0eU66LRuro>" %}

It’s more flexible than a basic image comparison component. You can use any content for the before and after, customise the handle, switch between vertical or horizontal layouts, and it includes full touch support.

### Before After Component Settings

{% columns %}
{% column width="50%" %}

#### Before After

The Before After component gives you a responsive, draggable comparison slider for images or other content. The following options let you control sizing, orientation, behaviour, and the content itself.

**Sizing**\
These settings define the source and play details for your video.

**Height Mode**\
Controls how the component determines its height.

* **Aspect Ratio**\
  Enter a ratio such as `16/9` or `7/5`.\
  The component will always maintain this proportion regardless of screen size.
* **Fixed Height**

  Set the slider to be a fixed height.
* **Dynamic (Content)**\
  Hide or show the video player controls. This setting only works with .mp4 files.

**Orientation**\
Sets the direction of the comparison:

* **Horizontal**\
  The slider moves left and right.
* **Vertical**\
  The slider moves up and down.

**Animation**\
Automatically moves the handle when the component loads, a speed can be set in seconds.

**Handle**

* **Show**\
  Toggle the visibility of the draggable handle.
* **Start Position**\
  Defines where the handle (and therefore the reveal point) begins.

**Mode**\
Choose what type of content you want to compare:

* **Images**\
  A simple before/after image comparison.
* **Content**\
  Allows any Components inside each side.
  {% endcolumn %}

{% column width="50%" %}

<figure><img src="/files/SNYqaPiF50JSEfbmMYhT" alt=""><figcaption></figcaption></figure>
{% endcolumn %}
{% endcolumns %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.realmacsoftware.com/elements-docs/elements/components/before-after-paid.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.