img-comparison-slider-fork
TypeScript icon, indicating that this package has built-in type declarations

3.0.1 • Public • Published

img-comparison-slider

npm package Published on webcomponents.org

Slider component for comparing images (before and after).

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

Example

Browsers support

IE / EdgeIE / Edge FirefoxFirefox ChromeChrome SafariSafari iOS SafariiOS Safari SamsungSamsung
IE11 (limited), Edge last 2 versions last 2 versions last 2 versions last 2 versions last 2 versions

Why yet another slider?

Because all existing solutions lack at least one of the features:

  • Mobile friendly
  • Accessible
  • Responsive
  • jQuery free
  • Compatible with modern frameworks (React, Angular, Vue2, Vue3)
  • Distributed through CDN or NPM

Installation

HTML

<script
  type="module"
  src="https://unpkg.com/img-comparison-slider@3/dist/component/component.esm.js"
></script>
<script
  nomodule=""
  src="https://unpkg.com/img-comparison-slider@3/dist/component/component.js"
></script>
<link
  rel="stylesheet"
  href="https://unpkg.com/img-comparison-slider@3/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-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

Package Sidebar

Install

npm i img-comparison-slider-fork

Weekly Downloads

0

Version

3.0.1

License

MIT

Unpacked Size

9.15 kB

Total Files

3

Last publish

Collaborators

  • jackillman