← Back

img-comparison-slider

Compare images before and after

Author

Contributors

Rating

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

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`

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

Released: 2019-08-25
Maturity: IMPORTED
License: MIT License

Compatibility

Framework
Browser: Browser Independent

img-comparison-slider - Vaadin Add-on Directory

Compare images before and after

# img-comparison-slider Slider component to compare images before and after. [![npm package](https://img.shields.io/npm/v/img-comparison-slider.svg)](https://www.npmjs.com/package/img-comparison-slider) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/img-comparison-slider) [![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d)](https://stenciljs.com) ## Browsers support | [

](http://godban.github.io/browsers-support-badges/)
IE / Edge | [

](http://godban.github.io/browsers-support-badges/)
Firefox | [

](http://godban.github.io/browsers-support-badges/)
Chrome | [

](http://godban.github.io/browsers-support-badges/)
Safari | [

](http://godban.github.io/browsers-support-badges/)
iOS Safari | [

](http://godban.github.io/browsers-support-badges/)
Samsung | | --------- | --------- | --------- | --------- | --------- | --------- | | IE11 *([limited](docs/ie.md))*, 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 ```html

``` ### Frameworks support * [React](docs/installation/react.md) * [Angular](docs/installation/angular.md) * [Vue](docs/installation/vue.md) ## Styling The component could be styled with the help of CSS3 variables. Example: ```html ``` ### 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` |

Directory