Installation

npm install react-image-comparison-slider

or

yarn add react-image-comparison-slider

Usage

import ImageSlider from "react-image-comparison-slider";

<div style={{ width: 700, height: 450 }}>
    <ImageSlider
        image1=""
        image2=""
        onSlide={() => {
          console.log("sliding");
        }}
    />
</div>

Props

| Props | Type | Default | Description | | --------------------- | :---------: | :-------: | --------------------------------------------------------- | | image1 | string | - | First image's source (URL, base64 string etc.) | | image2 | string | - | Second image's source (URL, base64 string etc.) | | alt1 | string | "alt1" | First image's alt text | | alt2 | string | "alt2" | Second image's alt text | | sliderColor | string | "red" | Slider's color. Should be valid CSS color expression. | | sliderWidth | number | 3 | Slider's width in pixel. | | showHandle | boolean | true | If false, hides slider handle. | | handleBackgroundColor | string | "white" | Background color of the slider's handle. | | handleColor | string | "red" | Background color of the triangles on the slider's handle. | | customHandle | DOM Element | null | Renders the passed DOM element as a slider handle. | | sliderInitialPosition | number | 0.5 | Slider's initial position between 0 and 1. | | leftLabelText | string | null | A label for the first image. | | rightLabelText | string | null | A label for the second image. | | showPlaceholder | boolean | true | Placeholder is shown while waiting for full image to load | | customPlaceholder | DOM Element | null | Pass your custom placeholder component/element. |

Callbacks

| Props | Type | Default | Description | | ------------------ | :------: | :-----: | ---------------------------------------------------------------------- | | onSlide | function | - | A callback function which is invoked on slider's position change. | | onSlideEnd | function | - | A callback function which is invoked on mouseUp at the end of sliding. | | onLoadFirstImage | function | - | Is invoked when the first image has finished loading. | | onLoadSecondImage | function | - | Is invoked when the second image has finished loading. | | onErrorFirstImage | function | - | Is invoked when an error occurs loading the first image. | | onErrorSecondImage | function | - | Is invoked when an error occurs loading the second image. |

Animation

| Props | Type | Default | Description | | ---------------------- | :-----: | :-----: | ------------------------------------- | | animate | boolean | false | Animates slider. | | animationCycleDuration | number | 5000 | Duration of animation in miliseconds. |