Compare Slider

Before and after split by a draggable divider.

Shipped

Wireframe

BeforeAfter

Installation

bash

npx shadcn@latest add https://ui.noicess.fun/r/compare-slider.json

Prop	Type	Default	Description
before / after	React.ReactNode	-	The two layers. Images should share dimensions.
initial	number	0.5	Start position, 0 to 1.
beforeLabel / afterLabel	string	"Before" / "After"	Edge tags that fade as the divider nears.
onChange	(position: number) => void	-	Called with the rounded position on move.