Vernier Caliper Slider

A numeric slider input styled as a working vernier caliper, where a fine tick row lines up against a fixed coarse scale to reveal precise decimal values, for entering exact numbers like weights or measurements.

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

import { VernierSlip } from "@/components/ui/slider-vernier";

export default function VernierSliderDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-6">
      <VernierSlip
        label="Weight"
        unit="g"
        min={0}
        max={20}
        step={0.1}
        defaultValue={4.2}
      />
    </div>
  );
}