Number Range

Forms 1

About

Two-thumb slider paired with synced number inputs. Min/max/step, currency or unit formatting, keyboard-first.

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

Code

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

Usage.tsx

import {
  NumberRange,
  NumberRangeSlider,
  NumberRangeInputs,
} from "@/components/ui/number-range";

export default function NumberRangeDemo() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <NumberRange
        defaultValue={[200, 800]}
        min={0}
        max={1000}
        step={10}
        prefix="$"
      >
        <NumberRangeSlider />
        <NumberRangeInputs />
      </NumberRange>
    </div>
  );
}