Compare images before and after

img-comparison-slider

Slider component to compare images before and after.

npm package Published on webcomponents.org Built With Stencil

Browsers support

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
iOS Safari
iOS Safari
Samsung
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

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

Install

Link to this version
ImportedReleased 25 August 2019MIT License
Framework Support
Browser Independent
Install with
npm install img-comparison-slider"@2.2.1"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 2.2.1

Dependencies