npm install react-image-comparison-slider
or
yarn add react-image-comparison-slider
import ImageSlider from "react-image-comparison-slider";
<div style={{ width: 700, height: 450 }}>
<ImageSlider
image1=""
image2=""
onSlide={() => {
console.log("sliding");
}}
/>
</div>
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. |
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. |
Props |
Type |
Default |
Description |
animate |
boolean |
false |
Animates slider. |
animationCycleDuration |
number |
5000 |
Duration of animation in miliseconds. |