Slider Component

Compare two images. Before and after.
Now try to use or arrows on the keyboard.


  • Mobile-friendly
  • Accessible
  • Responsive
  • Compact
  • Adjustable
  • Supports modern JS frameworks

Why do I need img-comparison-slider?

This free open source slider component was created to demonstrate the difference between two images. For example, to show the difference before and after applying photo effects or filters, to compare photos of rooms before and after construction, or to show landscape changes over time. The most enjoyable user experience with the component could be achieved by comparing images with pixel-perfect matching fragments. This component is well suited for news portals, artist or design portfolios.

Since it is a web component, it can be effortlessly added to almost any web application or design system. The component offers a wide range of settings - many configuration ideas and styling techniques can be found in the examples. The setup and settings documentation is available on the component's GitHub page.