# \[CW 18.21\] New Image Comparison Slider aka Before/After-Element

**URL:** <https://community.sitejet.io/t/cw-18-21-new-image-comparison-slider-aka-before-after-element/88>\
**Category:** Updates and Releases\
**Created:** [May 11, 2021, 9:50am UTC](https://community.sitejet.io/t/cw-18-21-new-image-comparison-slider-aka-before-after-element/88 "2021-05-11T09:50:54Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [May 11, 2021, 9:50am UTC](https://community.sitejet.io/t/cw-18-21-new-image-comparison-slider-aka-before-after-element/88/1 "2021-05-11T09:50:54Z")

</div>

Hey Sitejetters,

We have a great new preset for you!

Due to popular demand we would like to introduce our new “Comparison Slider”, better known as a “Before/After”-element. This preset is now available via the top panel → add preset → features

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/1X/6005a442d988c006fb5607ae75568aae7b2c4a56.jpeg)

Set the color of the separator and its style and a few more options to test out 😉

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/1X/1216332f0ba2d7a4b8c9d946d91cc19bd603b6e2.png)

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/1X/7bbcf269c9089b31d9cb7f14c44a976da5d2ebba.jpeg)

Try it out and let us know what you think!

---

<div class="post-metadata">

**Author:** ![zachary](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/zachary/32/26_2.png) [@zachary](https://community.sitejet.io/u/zachary)\
**Post date:** [May 11, 2021, 1:58pm UTC](https://community.sitejet.io/t/cw-18-21-new-image-comparison-slider-aka-before-after-element/88/2 "2021-05-11T13:58:47Z")

</div>

Awesome guys!

I’ve been using this slider from Elfsight for a while - I know it natively had some issues with responsivity when nested inside anything on the page (not a direct child of the body).

I’m sure that got ironed out in integration, but just a heads up! It can be sneaky.

Excited to use this! Micro-interactions are 👌

---

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [May 17, 2024, 9:08am UTC](https://community.sitejet.io/t/cw-18-21-new-image-comparison-slider-aka-before-after-element/88/3 "2024-05-17T09:08:45Z")

</div>