Compare

No dependencies
Code format
React + Tailwind
import { useState } from 'react';

const css = `
  .slider-compare { position: relative; width: 230px; height: 140px; overflow: hidden; border-radius: 12px; box-shadow: inset 0 0 0 1px light-dark(#dbdde1, #2e3035), 0 10px 24px -14px light-dark(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.6)); }
  .slider-compare__layer { position: absolute; inset: 0; padding: 14px; display: grid; grid-template-rows: auto 1fr; gap: 10px; }
  .slider-compare__layer--before { background: light-dark(#f3f4f7, #1a1c1f); }
  .slider-compare__layer--after { background: light-dark(#ebedf0, #232529); clip-path: inset(0 0 0 calc(14px + var(--slider-compare-v) * (100% - 28px))); }
  .slider-compare__bar { display: flex; align-items: center; gap: 6px; }
  .slider-compare__dot { width: 8px; height: 8px; border-radius: 50%; }
  .slider-compare__line { height: 6px; border-radius: 3px; }
  .slider-compare__body { display: grid; grid-template-columns: 74px 1fr; gap: 10px; }
  .slider-compare__img { border-radius: 6px; }
  .slider-compare__copy { display: grid; align-content: start; gap: 6px; }
  .slider-compare__btn { width: 54px; height: 18px; margin-top: 4px; border-radius: 9px; }
  .slider-compare__layer--before .slider-compare__dot, .slider-compare__layer--before .slider-compare__line, .slider-compare__layer--before .slider-compare__btn { box-shadow: inset 0 0 0 1px light-dark(#cbced3, #393c41); }
  .slider-compare__layer--before .slider-compare__img { box-shadow: inset 0 0 0 1px light-dark(#cbced3, #393c41); background: linear-gradient(to top right, transparent calc(50% - 0.5px), light-dark(#cbced3, #393c41) 50%, transparent calc(50% + 0.5px)), linear-gradient(to bottom right, transparent calc(50% - 0.5px), light-dark(#cbced3, #393c41) 50%, transparent calc(50% + 0.5px)); }
  .slider-compare__layer--after .slider-compare__dot { background: light-dark(#6d7179, #7d8087); }
  .slider-compare__layer--after .slider-compare__line { background: light-dark(#cbced3, #393c41); }
  .slider-compare__layer--after .slider-compare__img { background: radial-gradient(circle at 70% 30%, light-dark(#42454c, #e5e6e9) 0 8px, transparent 9px), linear-gradient(160deg, light-dark(#6d7179, #7d8087), light-dark(#dbdde1, #2e3035)); }
  .slider-compare__layer--after .slider-compare__head { background: light-dark(#373a40, #f1f2f3); height: 9px; }
  .slider-compare__layer--after .slider-compare__btn { background: light-dark(#373a40, #f1f2f3); }
  .slider-compare__tag { position: absolute; bottom: 8px; padding: 2px 6px; border-radius: 4px; font-size: 9px; font-weight: 600; letter-spacing: 0.08em; }
  .slider-compare__layer--before .slider-compare__tag { left: 8px; color: light-dark(#5f626a, #a7abb2); box-shadow: inset 0 0 0 1px light-dark(#cbced3, #393c41); }
  .slider-compare__layer--after .slider-compare__tag { right: 8px; color: light-dark(#fbfcfd, #121417); background: light-dark(#373a40, #f1f2f3); }
  .slider-compare__divider { position: absolute; top: 0; bottom: 0; left: calc(14px + var(--slider-compare-v) * (100% - 28px)); width: 2px; margin-left: -1px; background: light-dark(#373a40, #f1f2f3); box-shadow: 0 0 8px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.5)); }
  .slider-compare__handle { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; gap: 4px; width: 28px; height: 28px; margin: -14px; border-radius: 50%; background: light-dark(#373a40, #f1f2f3); box-shadow: 0 2px 8px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.5)); transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); }
  .slider-compare__handle::before, .slider-compare__handle::after { content: ''; border: 4px solid transparent; }
  .slider-compare__handle::before { border-right-color: light-dark(#dbdde1, #2e3035); margin-left: -4px; }
  .slider-compare__handle::after { border-left-color: light-dark(#dbdde1, #2e3035); margin-right: -4px; }
  .slider-compare:has(.slider-compare__input:active) .slider-compare__handle { transform: scale(1.12); }
  .slider-compare:has(.slider-compare__input:focus-visible) .slider-compare__handle { outline: 2px solid light-dark(#50535b, #c6c8cd); outline-offset: 3px; }
  .slider-compare__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: none; }
  .slider-compare__input::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 140px; }
  .slider-compare__input::-moz-range-thumb { width: 28px; height: 140px; border: 0; }
  @media (prefers-reduced-motion: reduce) {
    .slider-compare__handle { transition: none; }
  }
`;

function Mock({ after }: { after?: boolean }) {
  return (
    <div className={`slider-compare__layer slider-compare__layer--${after ? 'after' : 'before'}`}>
      <div className="slider-compare__bar">
        <span className="slider-compare__dot" />
        <span className="slider-compare__line" style={{ width: 40 }} />
        <span className="slider-compare__line" style={{ width: 24, marginLeft: 'auto' }} />
      </div>
      <div className="slider-compare__body">
        <span className="slider-compare__img" />
        <span className="slider-compare__copy">
          <span className="slider-compare__line slider-compare__head" style={{ width: '90%' }} />
          <span className="slider-compare__line" style={{ width: '100%' }} />
          <span className="slider-compare__line" style={{ width: '70%' }} />
          <span className="slider-compare__btn" />
        </span>
      </div>
      <span className="slider-compare__tag">{after ? 'AFTER' : 'BEFORE'}</span>
    </div>
  );
}

export function CompareSlider() {
  const [v, setV] = useState(50);
  return (
    <>
      <style>
        {css}
      </style>
      <div className="slider-compare" style={{ '--slider-compare-v': v / 100 } as React.CSSProperties}>
        <div aria-hidden="true">
          <Mock />
          <Mock after />
          <span className="slider-compare__divider">
            <span className="slider-compare__handle" />
          </span>
        </div>
        <input
          className="slider-compare__input"
          type="range"
          min={0}
          max={100}
          value={v}
          onChange={(e) => setV(+e.target.value)}
          aria-label="Compare before and after"
          aria-valuetext={`${100 - v} percent after`}
        />
      </div>
    </>
  );
}

Free to use in any project, commercial included. MIT-0, no attribution required. Licence

Install with shadcn

npx shadcn@latest add @movin/slider-compare
Source on GitHub

About this component

A before-and-after comparison: drag the divider across two versions of a page and each side reveals more of its version, with the label on each.

Dependencies
None
Difficulty
Beginner
Triggers
state change, mouse tracking
Techniques
css variables, clip path
Reduced motion
Respected
Theme
Light and dark (follows your page's color-scheme)

A native range input with an aria-label and an aria-valuetext in words, so a screen reader announces the reading rather than a bare number; keyboard focus outlines the drawn thumb. The divider follows the value directly; under prefers-reduced-motion the handle's press pop loses its spring.

More sliders

See all
Crowd
Curl
Daylight
Dial