react-image-comparison-slider

A React component to compare images with a slider.

Usage no npm install needed!

<script type="module">
  import reactImageComparisonSlider from 'https://cdn.skypack.dev/react-image-comparison-slider';
</script>

README

React Image Comparison Slider

Click above to play with the live demo.

Node.js CI NPM Package Version Gzipped Size License MIT

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.