@julio-soto/react-compare-slider NPM

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