Here we have a draggable slider that allows the comparison between two images. It has been created with CSS and jQuery. This can be used, for example, to compare the standard quality of a product with an enhanced view of the same product. Like TV brands, which are very handy at this, you can put an image comparison on your website as well.

This tutorial + code snippet was created to make this possible, showing all the process, from the structure, the styling and the events handling.

It was written and coded by Claudia Romano from CodyHouse.