Image comparison slider for Svelte 3

Simple Svelte component to compare two images using slider.

Features

• Simple
• Responsive (fit to the parent width)
• Size difference between two images handled correctly. Element size determined by following two factors:
  • width of the parent
  • right image's aspect ratio

Install

npm i svelte-image-compare --save

yarn add svelte-image-compare

CDN: UNPKG | jsDelivr (available as window.ImageCompare)

Usage

<ImageCompare 
    before="//placehold.it/600x200/E8117F/FFFFFF"
    after="//placehold.it/600x200/CCCCCC/FFFFFF"
    contain={true}
>
	<span slot="before">BEFORE</span>
	<span slot="after">AFTER</span>
</ImageCompare>

<script>
    import ImageCompare from './ImageCompare.svelte';
</script>

If you are not using using es6, instead of importing add

<script src="/path/to/svelte-image-compare/index.js"></script>

just before closing body tag.

API

Props

| Name | Type | Description | Required | Default | | --- | --- | --- | --- | --- | | before | String | Path to the image image before change | Yes | empty string | | after | String | Path to the image image after change | Yes | empty string | | offset | Number | How far from the left the slider should be on load (between 0 and 1) | No | 0.5 | | contain | Boolean | Determines if images are stretched to fill parent element. Can be used with help of CSS object-fit: cover to create full page image comparison | No | false | | overlay | Boolean | Show overlay upon images | No | true | | hideOnSlide | Boolean | Hide overlay & labels on sliding | No | true |

Slots

• before - element to be placed on top of before image (basically a label)
• after - element to be placed on top of after image (basically a label)

License

MIT © PaulMaly