Before/after image comparison with draggable slider.

Features

• ✅ Zero dependencies - Pure React implementation
• ✅ Full accessibility - ARIA labels, keyboard navigation, screen reader support
• ✅ Theme support - Light, dark, and auto modes
• ✅ Reduced motion support - Respects user preferences

Props

beforeImage(required)

• Type: string
• Before image URL or data URI

afterImage(required)

• Type: string
• After image URL or data URI

beforeLabel

• Type: string - Default: 'Before'
• Before label

afterLabel

• Type: string - Default: 'After'
• After label

initialPosition

• Type: number - Default: 50
• Initial slider position (0-100)

orientation

• Type: 'vertical' | 'horizontal' - Default: 'vertical'
• Slider orientation

theme

• Type: 'light' | 'dark' | 'auto' - Default: 'auto'
• Theme mode

radius

• Type: number - Default: 8
• Border radius in pixels

density

• Type: 'comfortable' | 'compact' - Default: 'comfortable'
• Layout density

animate

• Type: boolean - Default: true
• Enable animations

className

• Type: string
• Additional CSS class

a11yLabel

• Type: string
• Accessibility label

Customization

CSS Variables

Override these variables in your Webflow custom code or CSS:

--cc-radius: 8px; /* Border radius */

Webflow Classes

Target these classes in Webflow Designer for custom styles:

• .cc-comparison-slider
• .cc-comparison-slider__after
• .cc-comparison-slider__before
• .cc-comparison-slider__handle
• .cc-comparison-slider__handle-button
• .cc-comparison-slider__handle-line
• .cc-comparison-slider__image
• .cc-comparison-slider__label