Comparison Slider

Before/after image comparison with draggable or hover controls

comparison-slider-tw

Customize

Initial Position

Enable InertiaDrag on HoverAuto Animate

Divider Color

Divider Width

Show Handle

Handle Color

Handle Size

Show LabelsShow Percentage

Props

Name	Type	Default	Description
`beforeImage`	string	`""`	URL for the before image (left/top layer)
`afterImage`	string	`""`	URL for the after image (right/bottom layer)
`beforeAlt`	string	`"Before"`	Alt text for the before image
`afterAlt`	string	`"After"`	Alt text for the after image
`initialPosition`	number	`50`	Initial position of the slider (0-100)
`orientation`	"horizontal" \| "vertical"	`"horizontal"`	Orientation of the slider
`enableInertia`	boolean	`true`	Enable inertia/momentum on drag release
`dragOnHover`	boolean	`false`	Enable drag on hover without clicking
`autoAnimate`	boolean	`false`	Auto-animate slider with smooth random movement
`dividerWidth`	number	`3`	Width of the divider line in pixels
`showHandle`	boolean	`true`	Show the draggable handle with icon
`handleSize`	number	`48`	Size of the handle in pixels
`handleIcon`	React.ReactNode	`undefined`	Custom icon component for the handle
`dividerColor`	string	`"white"`	Color of the divider line
`handleColor`	string	`"white"`	Color of the handle background
`onPositionChange`	(position: number) => void	`undefined`	Callback when slider position changes
`className`	string	`""`	Additional CSS classes for the container
`imageClassName`	string	`""`	Additional CSS classes for both images
`showLabels`	boolean	`false`	Show before/after labels on images
`labelText`	{ before: string; after: string }	`{ before: "Before", after: "After" }`	Custom text for labels
`labelPosition`	"top-left" \| "top-right" \| "bottom-left" \| "bottom-right"	`"top-left"`	Position of the labels
`labelClassName`	string	`""`	Additional CSS classes for both labels
`beforeLabelClassName`	string	`""`	Additional CSS classes for before label
`afterLabelClassName`	string	`""`	Additional CSS classes for after label
`showPercentage`	boolean	`false`	Show percentage indicator
`percentagePosition`	"top" \| "bottom"	`"top"`	Position of percentage indicator
`onDragStart`	() => void	`undefined`	Callback when drag starts
`onDragEnd`	() => void	`undefined`	Callback when drag ends
`ariaLabel`	string	`"Image comparison slider"`	Custom ARIA label for accessibility
`reducedMotion`	boolean	`false`	Respect prefers-reduced-motion setting

beforeImagestring

URL for the before image (left/top layer)

Default""

afterImagestring

URL for the after image (right/bottom layer)

Default""

beforeAltstring

Alt text for the before image

Default"Before"

afterAltstring

Alt text for the after image

Default"After"

initialPositionnumber

Initial position of the slider (0-100)

Default50

orientation"horizontal" | "vertical"

Orientation of the slider

Default"horizontal"

enableInertiaboolean

Enable inertia/momentum on drag release

Defaulttrue

dragOnHoverboolean

Enable drag on hover without clicking

Defaultfalse

autoAnimateboolean

Auto-animate slider with smooth random movement

Defaultfalse

dividerWidthnumber

Width of the divider line in pixels

Default3

showHandleboolean

Show the draggable handle with icon

Defaulttrue

handleSizenumber

Size of the handle in pixels

Default48

handleIconReact.ReactNode

Custom icon component for the handle

Defaultundefined

dividerColorstring

Color of the divider line

Default"white"

handleColorstring

Color of the handle background

Default"white"

onPositionChange(position: number) => void

Callback when slider position changes

Defaultundefined

classNamestring

Additional CSS classes for the container

Default""

imageClassNamestring

Additional CSS classes for both images

Default""

showLabelsboolean

Show before/after labels on images

Defaultfalse

labelText{ before: string; after: string }

Custom text for labels

Default{ before: "Before", after: "After" }

labelPosition"top-left" | "top-right" | "bottom-left" | "bottom-right"

Position of the labels

Default"top-left"

labelClassNamestring

Additional CSS classes for both labels

Default""

beforeLabelClassNamestring

Additional CSS classes for before label

Default""

afterLabelClassNamestring

Additional CSS classes for after label

Default""

showPercentageboolean

Show percentage indicator

Defaultfalse

percentagePosition"top" | "bottom"

Position of percentage indicator

Default"top"

onDragStart() => void

Callback when drag starts

Defaultundefined

onDragEnd() => void

Callback when drag ends

Defaultundefined

ariaLabelstring

Custom ARIA label for accessibility

Default"Image comparison slider"

reducedMotionboolean

Respect prefers-reduced-motion setting

Defaultfalse

Demo images by Alexander Shatov @ unsplash.com, not part of the React Bits Pro offer.