img-comparison-slider

img-comparison-slider

Slider component to compare images before and after.

Browsers support

IE / Edge	Firefox	Chrome	Safari	iOS Safari	Samsung
IE11 (limited), Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions

Overview

This is the best comparison slider because it:

• Looks great on mobile devices
• Supports keyboard
• Responsive
• Works with plain HTML pages, React, Angular, or Vue
• Easy to install
• Lightweight ~7kb
• Zero dependencies

Installation

HTML

<script
  type="module"
  src="https://unpkg.com/img-comparison-slider@latest/dist/component/component.esm.js"
></script>
<script
  nomodule=""
  src="https://unpkg.com/img-comparison-slider@latest/dist/component/component.js"
></script>
<link
  rel="stylesheet"
  href="https://unpkg.com/img-comparison-slider@latest/dist/collection/styles/initial.css"
/>

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

Frameworks support

• React
• Angular
• Vue

Styling

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

Example:

<style type="text/css">
  img-comparison-slider {
    --divider: 3px solid #c0c0c0;
    --hint-opacity: 0.3;
  }
</style>

Available variables

Variable	Description	Default value
--divider	Vertical line dividing before and after image	1px solid #d7d7d7
--hint-size	Size of hint arrows at the middle of divider	40px
--hint-color	Color of hint arrows at the middle of divider	#d7d7d7
--hint-opacity	Opacity of hint arrows	0.5
--hint-opacity-active	On focus opacity of hint arrows	0