react-compare-slider

React Compare Slider

Compare two components side-by-side or top-to-toe.

---

Features

• Supports responsive images and any other React components (picture, video, canvas, iframe etc.)
• Supports landscape and portrait orientations
• Accessible – screen reader and keyboard support out of the box
• Simple API
• Unopinionated & fully customizable – optionally use your own components and styles
• Responsive & fluid with intrinsic sizing
• Teeny-tiny, zero dependencies
• Type safe

Demo

• Storybook: docs, demos, custom recipies, custom handles
• CodeSandbox: basic demo
• Local example

Usage

Install

npm install react-compare-slider
# or
yarn add react-compare-slider
# or
pnpm add 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';

export const Example = () => {
  return (
    <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	Description
boundsPadding	number		0	Padding to limit the slideable bounds in pixels on the X-axis (landscape) or Y-axis (portrait).
changePositionOnHover	boolean		false	Whether the slider should follow the pointer on hover.
disabled	boolean		false	Whether to disable slider movement (items are still interactable).
handle	ReactNode		undefined	Custom handle component.
itemOne	ReactNode	✓	undefined	First component to show in slider.
itemTwo	ReactNode	✓	undefined	Second component to show in slider.
keyboardIncrement	number|`${number}%`		5%	Percentage or pixel amount to move when the slider handle is focused and keyboard arrow is pressed.
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).
transition	string		undefined	Shorthand CSS transition property to apply to handle movement. E.g. .5s ease-in-out

API docs for more information.

Real World Examples

• Official GOV.UK Coronavirus Dashboard
• Upscayl, Free and Open Source AI Image Upscaler
• Counter-Strike 2 Website

Requirements

• React 16.8+
• The latest two versions of each major browser are officially supported