Before After
`BeforeAfter` compares two aligned visual states with one native range control. Use it for redesigns, editing, restoration and honest product comparisons.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Purpose
BeforeAfter compares two aligned visual states with one native range control. Use it for redesigns, editing, restoration and honest product comparisons.
Both layers need labels and equivalent dimensions. Avoid misleading crops, unrelated imagery or using the slider when side-by-side comparison is clearer. The position must respond to arrows, touch and a controlled value without requiring drag precision.
Keep tactile feedback small and preserve the native range semantics. Reduced motion removes thumb flourish, not control behaviour. Compose with captions that explain what changed; never let color alone carry the comparison.
Source: packages/skills/media/before-after.md