Modus UI

Comparison Slider

Web (React)

Two layers stacked, with a divider the user drags to compare them.

A buttery smooth, accessible image/layer comparison slider. It supports both horizontal and vertical orientations and is fully keyboard navigable.

Live Preview
Light Mode
Dark Mode

Installation

CLI

npx @modus-ui/cli add comparison-slider

Manual

  1. Copy the code from the component tab.
  2. Create a file at components/ui/comparison-slider.tsx.
  3. Paste the code.

Usage

tsx
import { ComparisonSlider } from "@/components/ui/comparison-slider";

export default function Example() {
  return (
    <div className="h-[300px] w-[500px]">
      <ComparisonSlider
        before={<img src="/before.jpg" alt="Before" className="h-full w-full object-cover" />}
        after={<img src="/after.jpg" alt="After" className="h-full w-full object-cover" />}
      />
    </div>
  );
}

Props

PropTypeDefaultDescription
beforeReactNode-The layer revealed on the leading side of the divider.
afterReactNode-The layer underneath, revealed as the divider moves across it.
defaultPositionnumber50Where the divider starts, 0 to 100.
orientation"horizontal" | "vertical""horizontal"The orientation of the slider.
labelstring"Compare before and after"Accessible name for the divider.
classNamestring""-

Comments

  • No comments yet.