Display

Comparison Slider

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

Import

tsx

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

bash

npx cronus-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-primary">
      <span className="rounded-md bg-surface-base/80 px-3 py-1 text-sm font-medium text-fg">
        After
      </span>
    </div>
  }
/>

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component ComparisonSliderDefault layout:inline style:comparison-slider {
  aria-label:"Comparison"
  label "Comparison"
  text "Before"
  text "After"
}

page "/audit/comparison-slider/default" type:custom {
  use ComparisonSliderDefault
}

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.
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.