All effects
MediaClient component

Compare Slider

A controlled or uncontrolled before-and-after stage with drag, hover and keyboard interaction.

Drag the handle or use the arrow keys

Effect style
Drag the divider

Usage

tsx
import { CompareSlider } from "@/components/effects/compare-slider"

export function Demo() {
  return (
    <CompareSlider
      className="h-96"
      before={<BeforeView />}
      after={<AfterView />}
      mode="drag"
    />
  )
}