Amount slider

Drag the grip thumb and the amount rolls like an odometer while the monthly payment works itself out. Pull past the end and the thumb stretches like rubber.

Forms, drag, Motion

Install

npm i clsx lucide-react motion tailwind-merge && curl -o components/amount-slider.tsx https://motion-brew.com/r/amount-slider.tsx

One self contained file for React and Tailwind CSS: amount-slider.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { AmountSlider } from "@/components/amount-slider";

export default function Page() {
  return (
    <AmountSlider
      min={5000}
      max={500000}
      step={1000}
      defaultValue={75000}
      onSubmit={(amount) => startApplication(amount)}
    />
  );
}

Props

Prop	Type	Default	Description
label	string	"How much do you need?"	Label above the amount
min	number	5000	Lowest amount
max	number	500000	Highest amount
step	number	1000	Amounts snap to this step
defaultValue	number	75000	Starting amount
currency	string	"USD"	ISO currency code
rate	number	7.5	Yearly rate in percent, for the estimate
months	number	60	Term in months, for the estimate
cta	string	"Continue"	Button label
onChange	(value) => void		Called as the amount changes
onSubmit	(value) => void		Called when the button is pressed
className	string		Placement

More forms

AI prompt input: A composer for an AI assistant: a growing field with rolling placeholders, file chips, a model picker, web search, voice with a rippling particle ring, and a send that launches into a shimmering working state.
Payment form: Card details with a focus ring that glides between fields, floating labels, card network logos and a lock that snaps shut, ending on a sealed confirmation.
Verify flow: Connect, check, verified: a segmented bar fills, a highlight slides down the checks as each one passes, and a green seal bursts in when you are connected.
Morph search: A search pill that lifts into a card.

All animated react form components