Scrubber

Component 2

About

A design-tool style scrubber slider with an animated capsule thumb, tick marks, inline label and value display, supporting pointer drag and keyboard control.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Scrubber to your project and fits it to your theme.

Code

How Scrubber is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Scrubber from "@/components/ui/scrubber";
import { useState } from "react";

export default function ScrubberDemo() {
  const [opacity, setOpacity] = useState(0.5);

  return (
    <div className="flex min-h-[240px] w-full items-center justify-center bg-background p-8">
      <div className="w-full max-w-xs">
        <Scrubber
          label="Opacity"
          value={opacity}
          onValueChange={setOpacity}
          min={0}
          max={1}
          step={0.01}
        />
      </div>
    </div>
  );
}