Comparison Slider

A before and after image slider

comparison-slider-tw

Offset violet and pink geometric discs cut by a warm apricot plane

Spectrum

The same geometric discs and diagonal plane in a vivid coral and violet palette

Color shift

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

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