KQ-686 · PRORATION/BAR

Proration Bar

A billing period as a bar split by the plan-change date: the days before fill in the primary colour, the days after are hatched because they come back as credit. The split is a real slider thumb — a key press or a track click slides it on glide, a drag follows the pointer directly — and the used and credit figures beneath roll on glide from whole cents. Left and Right move a day, Page Up and Page Down a week, Home and End reach the period's ends.

KQ-686 · PRORATION/BAR

Studio plan · Fieldline30 days · $48.00

Used · 11 days: $17.60
Credit · 19 days: $30.40

Change Sep 12 · 11 days used $17.60 · 19 days credit $30.40

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/proration-bar

Props

periodStart / periodEnd: string; default —; The period's first day and the day the next one begins, as YYYY-MM-DD. Day arithmetic is in UTC and never reads a clock.
price: number; default —; The period's charge in major units; used and credit are split from it in whole cents.
value / defaultValue: number; default half the period; Controlled or initial days used; onValueChange fires from the pointer, key or click that moved the split.
format: (value: number) => string; default —; Formats both figures. Defaults to a fixed en-US currency formatter.
label: string; default "Plan change"; Names the slider.
usedLabel / creditLabel: string; default —; Captions for the two figures; default Used and Credit.

Prop	Type	Default	Description
periodStart / periodEnd	string	—	The period's first day and the day the next one begins, as YYYY-MM-DD. Day arithmetic is in UTC and never reads a clock.
price	number	—	The period's charge in major units; used and credit are split from it in whole cents.
value / defaultValue	number	half the period	Controlled or initial days used; onValueChange fires from the pointer, key or click that moved the split.
format	(value: number) => string	—	Formats both figures. Defaults to a fixed en-US currency formatter.
label	string	"Plan change"	Names the slider.
usedLabel / creditLabel	string	—	Captions for the two figures; default Used and Credit.