Features

• Supports responsive images and any other React components (picture, video, canvas, iframe etc.)
• Supports landscape and portrait orientations
• Simple API
• Unopinionated & fully customizable – optionally use your own components and styles
• Responsive, fluid
• Teeny-tiny
• Zero dependencies
• Type safe

Demo

• Storybook: docs, demos
• CodeSandbox: basic editable demo
• Local example

Usage

Install

yarn add react-compare-slider
# OR
npm install react-compare-slider

Basic Image Usage

You may use ReactCompareSliderImage to render images or use your own custom components.

import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';

<ReactCompareSlider
  itemOne={<ReactCompareSliderImage src="..." srcSet="..." alt="Image one" />}
  itemTwo={<ReactCompareSliderImage src="..." srcSet="..." alt="Image two" />}
/>

See the Images docs for more information and demos.

Props

| Prop | Type | Required | Default value | Description | |------|------|:--------:|---------------|-------------| | boundsPadding | number | | 0 | Padding to limit the slideable bounds in pixels on the X-axis (landscape) or Y-axis (portrait). | | handle | ReactNode | | undefined | Custom handle component. | | itemOne | ReactNode | ✓ | undefined | First component to show in slider. | | itemTwo | ReactNode | ✓ | undefined | Second component to show in slider. | | onlyHandleDraggable | boolean | | false | Whether to only change position when handle is interacted with (useful for touch devices). | | onPositionChange | function | | undefined | Callback on position change, returns current position percentage as argument (position) => { ... }. | | portrait | boolean | | false | Whether to use portrait orientation. | | position | number | | 50 | Initial percentage position of divide (0-100). |

See the API docs for more information.

Extending

Custom Items

The library supports all types of React components.

• Google Maps Demo

Custom components can apply the same base styles as ReactCompareSliderImage by using the styleFitContainer CSS utility.

Custom Handles

See the Handles docs for more information.

Requirements

• React 16.8+
• The latest two versions of each major browser are officially supported – try version 1.2.1 if you need to support IE11

Notes

Bootstrapped with TSDX.