Data Display

Comparison Slider

Drag a divider to reveal a before/after comparison of two layers.

Import

tsx

import { ComparisonSlider } from "@cooud-ui/ui";

bash

npx cooud-ui add comparison-slider

Examples

Before & after

Drag the divider — or focus it and use the arrow keys — to wipe between two layers. Here two labelled panels stand in for a before/after image pair so it reads clearly offline.

After

Before

tsx

<ComparisonSlider
  aria-label="Before and after"
  className="h-64"
  before={
    <div className="flex size-full items-center justify-center bg-surface-inset">
      <span className="rounded-md bg-surface-overlay px-3 py-1 text-sm font-medium text-fg">
        Before
      </span>
    </div>
  }
  after={
    <div className="flex size-full items-center justify-center bg-gradient-primary">
      <span className="rounded-md bg-surface-base/80 px-3 py-1 text-sm font-medium text-fg">
        After
      </span>
    </div>
  }
/>

API Reference

Generated from the component's exported types.

ComparisonSliderProps

Extends Omit<HTMLAttributes<HTMLDivElement>, "onChange">

Prop	Type	Default	Description
`before`*	`ReactNode`	—	Content shown on the left, revealed by the clip (typically the "before" image).
`after`*	`ReactNode`	—	Content shown as the full base layer (typically the "after" image).
`defaultPosition`	`number`	`50`	Initial divider position as a percentage (0–100). Uncontrolled.
`position`	`number`	—	Controlled divider position as a percentage (0–100).
`onPositionChange`	`(position: number) => void`	—	Called with the next position when the divider moves.
`aria-label`	`string`	—	Accessible name for the divider handle.