Installation

``
npm install react-image-comparison-slider
`

or

`
yarn add react-image-comparison-slider
`

Usage

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

image1=""
image2=""
onSlide={() => {
console.log("sliding");
}}
/>

`

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. |