Nifty Pun Master

    svelte-compare-image
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.1 • Public • Published

    svelte-compare-image

    A Svelte component to compare two images. Find the package on NPM at svelte-compare-image.

    An interactive example can be found at https://brianm.me/svelte-compare-image/

    screen recording example

    The markup, state logic, and styling were originally adapted from react-compare-image.

    Docs

    The component will display the images and fill available width and height using a ResizeObserver according to the aspect ratios of the images.

    To use it, render the component as seen below, providing image src and alt text for the left and right images. The following CSS custom properties are optional and can be set to customize the appearance of the slider.

    Property Default Value
    --handle-size 2.5rem
    --slider-color #ffffff
    --slider-width 0.125rem
    <script lang="ts">
      import { CompareImage } from "svelte-compare-image";
      // or
      import CompareImage from "svelte-compare-image/CompareImage.svelte";
    </script>
    
    <CompareImage
      imageLeftSrc="https://via.placeholder.com/600x400/ffaa00/ffffff/?text=Left"
      imageLeftAlt="left"
      imageRightSrc="https://via.placeholder.com/600x400/00aaff/ffffff?text=Right"
      imageRightAlt="right"
      --handle-size="2.5rem"
      --slider-color="#ffffff"
      --slider-width="0.125rem"
    />

    Install

    npm i svelte-compare-image

    DownloadsWeekly Downloads

    6

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    11.9 kB

    Total Files

    7

    Last publish

    Collaborators

    • brianmitchl