Svelte Compare Image

A Svelte component to compare two images with a slider to reveal one over the other. Find the source on GitHub and on NPM at svelte-compare-image.

Example

url('data:image/svg+xml;utf8,')

Set the visibility of one image over the other. 0 is full visibility of the second image and 100 is full visibility of the first image. Any amount in-between is a left/right cutoff at the percentage of the slider.

Code Snippet

The CSS Custom Properties are optional. The configuration for the preview above is shown below.

<CompareImage
  imageLeftSrc="https://via.placeholder.com/600x400/ffaa00/ffffff/?text=Example+Text"
  imageLeftAlt="left"
  imageRightSrc="https://via.placeholder.com/600x400/00aaff/ffffff?text=Example+Text"
  imageRightAlt="right"
  --handle-size="2.5rem"
  --handle-background-color="rgba(0, 0, 0, 0.6)"
  --handle-background-image="url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 12H21M3 12L7 8M3 12L7 16M21 12L17 16M21 12L17 8" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')"
  --handle-border-width="0.125rem"
  --slider-color="#ffffff"
  --slider-width="0.125rem"
>
  <svelte:fragment slot="slider-label">
    Set the visibility of one image over the other. 0 is full visibility of
    the second image and 100 is full visibility of the first image. Any
    amount in-between is a left/right cutoff at the percentage of the slider.
  </svelte:fragment>
</CompareImage>