Slider component for comparing images (before and after).

Usage examples: https://img-comparison-slider.sneas.io/examples.html

• Mobile friendly
• Accessible
• Responsive
• Compact - less than 9 kB minified (Or less than 3 kB when gzipped)
• Compatible with modern frameworks (React, Angular, Vue2, Vue3)
• Distributed through CDN or NPM

<script
  defer
  src="https://unpkg.com/img-comparison-slider@7/dist/index.js"
></script>
<link
  rel="stylesheet"
  href="https://unpkg.com/img-comparison-slider@7/dist/styles.css"
/>

<img-comparison-slider>
  <img slot="first" src="before.jpg" />
  <img slot="second" src="after.jpg" />
</img-comparison-slider>

• React
• Angular
• Vue2
• Vue3

Besides the default HTMLElement attributes such as class, tabindex, title, etc., img-comparison-slider supports:

Some styling techniques and ideas could be found in examples.

The component items such as the default handle or divider could be styled with the help of CSS3 variables.

Example:

<style type="text/css">
  img-comparison-slider {
    --divider-width: 2px;
    --divider-color: #c0c0c0;
    --default-handle-opacity: 0.3;
  }
</style>

The component's handle could be changed by assigning slot="handle" attribute to any element inside img-comparison-slider.