comparison

Fragment reference comparison

tags

ui

Compares two content regions side-by-side with a draggable divider. Works best when both sides share the same dimensions. The handle can be dragged or controlled with arrow keys (Shift+arrows for larger steps, Home/End to jump to edges).

Usage

comparison
  img(slot="before" src="before.jpg" alt="Before")
  img(slot="after" src="after.jpg" alt="After")

Attributes

Name	Type	Default	Description
position	number	50	Initial divider position as a percentage (0–100).

CSS Custom Properties

Name	Description
--divider-width	Width of the dividing line.
--handle-size	Size of the drag handle.