Comparison Slider

Before/after image comparison with draggable or hover controls

comparison-slider-tw

Customize

Tweak the props live

Layout & Slider

Orientation

Initial Position50

Enable Inertia

Drag on Hover

Auto Animate

Divider & Handle

Divider Color

#ffffff

Divider Width3

Show Handle

Handle Color

#ffffff

Handle Size36

Labels & Percentage

Show Labels

Label Position

Show Percentage

Percentage Position

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)

Default:50

orientation"horizontal" | "vertical"

Orientation of the slider

Default:"horizontal"

enableInertiaboolean

Enable inertia/momentum on drag release

Default:true

dragOnHoverboolean

Enable drag on hover without clicking

Default:false

autoAnimateboolean

Auto-animate slider with smooth random movement

Default:false

dividerWidthnumber

Width of the divider line in pixels

Default:3

showHandleboolean

Show the draggable handle with icon

Default:true

handleSizenumber

Size of the handle in pixels

Default:48

handleIconReact.ReactNode

Custom icon component for the handle

Default:undefined

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

Default:undefined

classNamestring

Additional CSS classes for the container

Default:""

imageClassNamestring

Additional CSS classes for both images

Default:""

showLabelsboolean

Show before/after labels on images

Default:false

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

Default:false

percentagePosition"top" | "bottom"

Position of percentage indicator

Default:"top"

onDragStart() => void

Callback when drag starts

Default:undefined

onDragEnd() => void

Callback when drag ends

Default:undefined

ariaLabelstring

Custom ARIA label for accessibility

Default:"Image comparison slider"

reducedMotionboolean

Respect prefers-reduced-motion setting

Default:false

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