React Compare Slider

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

Important

This readme is for the v4 release which is currently in beta (react-compare-slider@beta).

See Version 3 for the latest stable release (react-compare-slider).

---

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

Demos

• Storybook: docs, demos, custom recipes, custom handles, useReactCompareSliderRef
• Standalone demo

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" />}
    />
  );
};

Custom Slider

You can also construct your own slider for more granular control.

import * as Slider from 'react-compare-slider/components';
import { useReactCompareSlider } from 'react-compare-slider/hooks';

export const Example = () => {
  const sliderProps = useReactCompareSlider({ portrait: true });

  return (
    <Slider.Provider {...sliderProps}>
      <Slider.Root>
        <Slider.Item item="itemOne">
          <Slider.Image
            src="https://raw.githubusercontent.com/nerdyman/stuff/main/libs/react-compare-slider/demo-images/lady-1.png"
            alt="Image one"
          />
        </Slider.Item>
        <Slider.Item item="itemTwo">
          <Slider.Image
            src="https://raw.githubusercontent.com/nerdyman/stuff/main/libs/react-compare-slider/demo-images/lady-2.png"
            alt="Image two"
          />
        </Slider.Item>
        <Slider.HandleRoot>
          <Slider.Handle />
        </Slider.HandleRoot>
      </Slider.Root>
    </Slider.Provider>
};

See the Components API for more information.

Props

Prop	Type	Required	Default	Description
boundsPadding	string		0px	Padding to limit the slideable bounds on the X-axis (landscape) or Y-axis (portrait).
browsingContext	globalThis		globalThis	Context to bind events to (useful for iframes).
clip	all|itemOne|itemTwo		all	Whether to clip itemOne, itemTwo or all items.
changePositionOnHover	boolean		false	Whether the slider should follow the pointer on hover.
defaultPosition	number		50	Initial percentage position of divide (0-100).
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	(position: number) => void		undefined	Callback on position change, returns current position percentage as argument.
portrait	boolean		false	Whether to use portrait orientation.
transition	string		undefined	Shorthand CSS transition property to apply to handle movement. E.g. .5s ease-in-out

API docs for more information.