Compare Slider
An interactive before/after comparison slider for comparing two elements side by side.
Installation
pnpm dlx shadcn@latest add @diceui/compare-sliderLayout
Import the parts, and compose them together.
import {
CompareSlider,
CompareSliderBefore,
CompareSliderAfter,
CompareSliderHandle,
} from "@/components/ui/compare-slider";
return (
<CompareSlider>
<CompareSliderBefore />
<CompareSliderAfter />
<CompareSliderHandle />
</CompareSlider>
)Examples
Controlled State
A compare slider with external controls for the slider position.
Vertical Orientation
A compare slider with vertical orientation, perfect for comparing tall images or content.
Customization
Compare slider with custom handle, labels, and vertical orientation.
API Reference
CompareSlider
The root container for the compare slider component.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-orientation] | "horizontal" | "vertical" |
CompareSliderBefore
The container for the "before" content that appears on the left (or top in vertical mode).
Prop
Type
| Data Attribute | Value |
|---|---|
[data-orientation] | "horizontal" | "vertical" |
CompareSliderAfter
The container for the "after" content that appears on the right (or bottom in vertical mode).
Prop
Type
| Data Attribute | Value |
|---|---|
[data-orientation] | "horizontal" | "vertical" |
CompareSliderHandle
The draggable handle that controls the comparison position.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-orientation] | "horizontal" | "vertical" |
CompareSliderLabel
Custom labels that can be positioned on either side of the comparison.
Prop
Type
Accessibility
Keyboard Interactions
| Key | Description |
|---|---|
| Tab | Moves focus to the slider. |
| Shift + Tab | Moves focus away from the slider to the previous focusable element. |
| ArrowLeftArrowUp | Moves the slider position left (or up in vertical mode) by the step amount. |
| ArrowRightArrowDown | Moves the slider position right (or down in vertical mode) by the step amount. |
| PageUp | Moves the slider position left (or up in vertical mode) by ten steps. |
| PageDown | Moves the slider position right (or down in vertical mode) by ten steps. |
| Shift + ArrowLeftShift + ArrowUp | Moves the slider position left (or up in vertical mode) by ten steps. |
| Shift + ArrowRightShift + ArrowDown | Moves the slider position right (or down in vertical mode) by ten steps. |
| Home | Moves the slider to the minimum position (0%). |
| End | Moves the slider to the maximum position (100%). |
Mouse and Touch Interactions
- Drag: Click and drag the handle to adjust the comparison position
- Click: Click anywhere on the slider container to jump to that position
- Touch: Full touch support for mobile devices
Advanced Usage
Custom Content Types
The compare slider works with any React content, not just images:
<CompareSlider>
<CompareSliderBefore>
<div className="flex items-center justify-center bg-blue-500">
<p>Old Design</p>
</div>
</CompareSliderBefore>
<CompareSliderAfter>
<div className="flex items-center justify-center bg-green-500">
<p>New Design</p>
</div>
</CompareSliderAfter>
<CompareSliderHandle />
</CompareSlider>Vertical Orientation
Use vertical orientation for comparing content that works better in a vertical layout. The slider handle moves vertically, and the "before" content appears on top while "after" content appears on bottom.
<CompareSlider orientation="vertical" className="h-[600px]">
<CompareSliderBefore>
{/* Top content */}
</CompareSliderBefore>
<CompareSliderAfter>
{/* Bottom content */}
</CompareSliderAfter>
<CompareSliderHandle />
</CompareSlider>See the Vertical Orientation example for a complete demo.
Custom Labels
Add custom labels to identify each side:
<CompareSlider>
<CompareSliderBefore label="Original">
{/* Content */}
</CompareSliderBefore>
<CompareSliderAfter label="Enhanced">
{/* Content */}
</CompareSliderAfter>
<CompareSliderHandle />
</CompareSlider>Or use the CompareSliderLabel component for more control:
<CompareSlider>
<CompareSliderBefore>
{/* Content */}
</CompareSliderBefore>
<CompareSliderAfter>
{/* Content */}
</CompareSliderAfter>
<CompareSliderHandle />
<CompareSliderLabel side="before" className="bg-blue-500/90 text-white">
Original
</CompareSliderLabel>
<CompareSliderLabel side="after" className="bg-green-500/90 text-white">
Enhanced
</CompareSliderLabel>
</CompareSlider>Browser Support
Core Features
All core comparison features work in modern browsers:
- Chrome/Edge: Full support
- Firefox: Full support
- Safari: Full support (iOS 13+)
Touch Gestures
Touch interactions require modern touch APIs:
- iOS Safari: Supported from iOS 13+
- Chrome Mobile: Full support
- Firefox Mobile: Full support
Troubleshooting
Content Overflow
Ensure your content is properly contained within the slider:
<CompareSlider className="h-[400px] overflow-hidden">
<CompareSliderBefore>
<img className="size-full object-cover" src="..." />
</CompareSliderBefore>
{/* ... */}
</CompareSlider>Performance with Large Images
For large images, consider:
- Using optimized image formats (WebP, AVIF)
- Lazy loading images
- Using appropriate image sizes for the display size
- Implementing image preloading for smoother transitions
Mobile Considerations
On mobile devices:
- Ensure touch targets are adequately sized
- Test on various screen sizes
- Consider using vertical orientation for better mobile UX
- Ensure content is responsive and scales appropriately
Credits
- Samuel Ferrara on Unsplash - For the demo images used in the examples.
