img-comparison-slider

img-comparison-slider

Slider component for comparing images (before and after).

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

Key Features

• Mobile friendly
• Accessible
• Responsive
• Compact - 7KB minified
• Compatible with modern frameworks (React, Angular, Vue2, Vue3)
• Distributed through CDN or NPM

Installation

HTML

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

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

Frameworks Support

• React
• Angular
• Vue2
• Vue3

Styling

The component could be styled with the help of CSS3 variables.

Example:

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

Available variables

Variable	Description	Default value
--divider-width	Width of the vertical line dividing both images	1px
--divider-color	Color of the vertical line dividing both images	#d7d7d7
--handle-size	Size of the handle in the middle of divider	40px
--handle-color	Color of the handle in the middle of divider	#d7d7d7
--handle-opacity	Opacity of the handle	0.5
--handle-opacity-active	On focus opacity of the handle	0