React-compare-slider NPM

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

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).
`browsingContext`	`globalThis`		`globalThis`	Context to bind events to (useful for iframes).
`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`	`(position: number) => void`		`undefined`	Callback on position change, returns current position percentage as argument.
`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`