img-comparison-slider

Slider component to compare images before and after
1,711,519 873
slider image web-component img compare comparison
Install
npm install img-comparison-slider
Latest Version:8.0.7
License:MIT
Last Updated:Oct 12, 2026
Links: GitHub  ·  npm
Maintainer: sneasio

img-comparison-slider

npm package Published on webcomponents.org

Slider Component for Comparing Images (Before and After).

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

Example

Most Important Features

  • Mobile friendly
  • Accessible
  • Responsive
  • Compact - less than 12 kB minified (Or less than 4 kB if gzipped)
  • Compatible with modern frameworks (React, Angular, Vue2, Vue3)
  • Distributed via CDN or NPM

Installation

Browser Requirements

HTML

<script
  defer
  src="https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/index.js"
></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/styles.css"
/>

<img-comparison-slider>
  <img slot="first" src="https://raw.githubusercontent.com/sneas/img-comparison-slider/HEAD/before.jpg" />
  <img slot="second" src="https://raw.githubusercontent.com/sneas/img-comparison-slider/HEAD/after.jpg" />
</img-comparison-slider>

Frameworks Support

Supported Attributes

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

Attribute Description Default Available
value Position of the divider in percents. 50 0..100
hover Automatically slide on mouse over. false
direction Set slider direction. horizontal horizontal, vertical
keyboard Enable/disable slider position control with the keyboard. enabled enabled, disabled
handle Enable/disable dragging by handle only. false true, false

Events

The component emits slide event when the slider position is changed by user.

Styling

Some styling techniques and ideas can be found in examples.

The component elements like the default handle or the separator line could be styled using CSS3 variables.

Example:

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

Available Variables

Variable Description Default value Example value
--divider-width Width of the vertical line separating both images 1px 1em
--divider-color Color of the vertical line separating the two images #fff rgba(0, 0, 0, 0.5)
--divider-shadow Shadow cast by the vertical line separating the two images none 0px 0px 5px rgba(0, 0, 0, 0.5)
--handle-position-start Handle position on the divider axis. In case the handle must be displaced off the center 50%
--default-handle-width Width of the default handle 50px
--default-handle-color Color of the default handle #fff rgba(0, 0, 0, 0.5)
--default-handle-opacity Opacity of the default handle 1 0.3
--default-handle-shadow Shadow cast by the default handle none 0px 0px 5px rgba(0, 0, 0, 1)

Handle

The handle of the component can be changed by assigning the attribute slot="handle" to any element within img-comparison-slider.

Related Packages

vue-image-compare2

Compare two images with a fancy slider

6,326 27
compare comparison image slider component vue
vue-image-compare

Compare two images via slider using vue.js

4,873 31
compare comparison image slider component vue
vue-image-compare-plus

Compare two images via slider using vue.js - Now with ability to choose slider s...

662 1
compare comparison image slider component vue
vue-maplibre-compare

A Vue 3 component for comparing MapLibre maps side-by-side with a slider

5,520
compare comparison slider map maplibre vue vue3
vue-progressive-image

Vue progressive image loading plugin

87,420 721
image img lazy loading progressive

Version History

Version Released License
8.0.7 MIT
8.0.6 MIT
8.0.5 MIT
8.0.4 MIT
8.0.3 MIT