# WeWeb Before and After Slider

**URL:** <https://community.weweb.io/t/weweb-before-and-after-slider/19164>\
**Category:** Ask us anything\
**Tags:** design\
**Created:** [July 11, 2025, 10:46am UTC](https://community.weweb.io/t/weweb-before-and-after-slider/19164 "2025-07-11T10:46:40Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![william1](https://avatars.discourse-cdn.com/v4/letter/w/b4bc9f/32.png) [@william1](https://community.weweb.io/u/william1)\
**Post date:** [July 11, 2025, 10:46am UTC](https://community.weweb.io/t/weweb-before-and-after-slider/19164/1 "2025-07-11T10:46:40Z")

</div>

Want to have this on my website, how can I do it on WeWeb?

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/0/058407bacb8dea112fae34ecb870d4a64aa07d11.jpeg)

---

<div class="post-metadata">

**Author:** ![Batik\_Okazov](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/batik_okazov/32/12688_2.png) [@Batik\_Okazov](https://community.weweb.io/u/Batik_Okazov)\
**Post date:** [July 11, 2025, 11:08am UTC](https://community.weweb.io/t/weweb-before-and-after-slider/19164/2 "2025-07-11T11:08:38Z")

</div>

hi,

I think it is possible only with custom JS or custom element. Try Weweb AI, [here](https://docs.weweb.io/weweb-ai/generating-custom-coded-components.html) you can find details about the general approach.

---

<div class="post-metadata">

**Author:** ![william1](https://avatars.discourse-cdn.com/v4/letter/w/b4bc9f/32.png) [@william1](https://community.weweb.io/u/william1)\
**Post date:** [July 11, 2025, 11:30am UTC](https://community.weweb.io/t/weweb-before-and-after-slider/19164/3 "2025-07-11T11:30:05Z")

</div>

Unfortunately it seems this is too much to ask of the AI, it just generates an image of a before and after slider that isn’t interactable, or an eldrich horror

---

<div class="post-metadata">

**Author:** ![Batik\_Okazov](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/batik_okazov/32/12688_2.png) [@Batik\_Okazov](https://community.weweb.io/u/Batik_Okazov)\
**Post date:** [July 11, 2025, 11:34am UTC](https://community.weweb.io/t/weweb-before-and-after-slider/19164/4 "2025-07-11T11:34:03Z")

</div>

Then you can import some appropriate solution from NPM. [Like this](https://www.npmjs.com/package/img-comparison-slider), maybe

---

<div class="post-metadata">

**Author:** ![william1](https://avatars.discourse-cdn.com/v4/letter/w/b4bc9f/32.png) [@william1](https://community.weweb.io/u/william1)\
**Post date:** [July 11, 2025, 11:50am UTC](https://community.weweb.io/t/weweb-before-and-after-slider/19164/5 "2025-07-11T11:50:41Z")

</div>

Working, thank you for the link + help 😀

---

<div class="post-metadata">

**Author:** ![ishika](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/ishika/32/13250_2.png) [@ishika](https://community.weweb.io/u/ishika)\
**Post date:** [July 11, 2025, 5:14pm UTC](https://community.weweb.io/t/weweb-before-and-after-slider/19164/6 "2025-07-11T17:14:35Z")

</div>

Hey @william1!  
I’m curious: did you build it using NPM?

Also, would love to see your result 🙂

---

<div class="post-metadata">

**Author:** ![william1](https://avatars.discourse-cdn.com/v4/letter/w/b4bc9f/32.png) [@william1](https://community.weweb.io/u/william1)\
**Post date:** [July 12, 2025, 9:39am UTC](https://community.weweb.io/t/weweb-before-and-after-slider/19164/7 "2025-07-12T09:39:04Z")

</div>

Hi Ishika, here is the result. I used the NPM link provided by Batik and then did some mild customization

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/8/8df4ebe396f9b6cde19b51db756a716ef85cfd0d.jpeg)

---

<div class="post-metadata">

**Author:** ![ishika](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/ishika/32/13250_2.png) [@ishika](https://community.weweb.io/u/ishika)\
**Post date:** [July 16, 2025, 12:13pm UTC](https://community.weweb.io/t/weweb-before-and-after-slider/19164/8 "2025-07-16T12:13:11Z")

</div>

Looks awesome! Thanks for sharing 🙂