This was a design concept/pattern that I first saw in use for an interactive on a website to show the before and after images of a natural disaster event.

Since then I have seen it pop up in a couple of different places, but mostly used to show before/after images in an interactive side-by-side comparison. Below is an example that I saw on a website showing the transformation of one type of image into another.

enter image description here

Would this UI component be classified as a slider, an image interaction or something else?

This is the only implementation of the design pattern that I have seen (with the slider in the middle of the overlaid images) but if there are sightings of alternate designs please also add them to the answers.


1 Answer 1


I would suggest : Image Comparison Slider

This an example I have seen months ago on Esri's website:

And another website that references the term:

  • 2
    Please add an explanation preferably supported by some sources.
    – jazZRo
    Feb 4, 2020 at 15:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.