Compare Slider

PreviewCode

Before

After

Installation

npx shadcn@latest add @blank/compare-slider

Usage

import {
  CompareSlider,
  CompareSliderAfter,
  CompareSliderBefore,
  CompareSliderHandle,
  CompareSliderLabel,
} from "@/components/ui/compare-slider"

<CompareSlider className="aspect-video">
  <CompareSliderAfter>
    <img src="/after.jpg" alt="After" />
  </CompareSliderAfter>
  <CompareSliderBefore>
    <img src="/before.jpg" alt="Before" />
  </CompareSliderBefore>
  <CompareSliderHandle />
</CompareSlider>

CompareSliderAfter stays in the flow and sizes the slider; CompareSliderBefore lies on top and is clipped at the divider. Press anywhere to move the divider there and drag from that point. The slider is one focusable control: arrow keys move it by step, Shift and the Page keys by ten steps, Home and End to the edges.

Examples

Vertical

Any content compares, not only images.

API Reference

CompareSlider

CompareSliderLabel

CompareSliderHandle takes children to replace the grip.