FreeInteractive

Compare Slider

Use this component for redesign reveals, generated output comparisons, image editing previews, and before-after product states.

ReactTailwind CSSSliderInteractive

const launch = build("fast");
deploy(product);
track(metrics);

const launch = build("clean");
deploy(product);
delight(users);

Overview

A draggable before-and-after comparison slider for UI, code, or image previews.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

No additional packages required after Tailwind CSS setup.

Usage

tsx

<CompareSlider />

Compare Slider.tsx

tsx

"use client";

import { useState } from "react";

export function CompareSlider() {
  const [value, setValue] = useState(52);

  return (
    <div className="relative h-64 w-full overflow-hidden rounded-xl border border-white/10 bg-zinc-950 text-white">
      <div className="absolute inset-0 bg-zinc-900 p-5 font-mono text-xs text-zinc-500">
        const launch = build("fast");<br />
        deploy(product);<br />
        track(metrics);
      </div>
      <div
        className="absolute inset-y-0 left-0 overflow-hidden bg-black p-5 font-mono text-xs text-lime-300"
        style={{ width: value + "%" }}
      >
        const launch = build("clean");<br />
        deploy(product);<br />
        delight(users);
      </div>
      <div className="absolute inset-y-0 w-px bg-lime-300" style={{ left: value + "%" }} />
      <input
        type="range"
        min="8"
        max="92"
        value={value}
        onChange={(event) => setValue(Number(event.target.value))}
        className="absolute inset-x-4 bottom-4 accent-lime-300"
        aria-label="Compare slider"
      />
    </div>
  );
}