Budget Allocation Onboarding Block for Vue

Each slider runs from $0 to the total, in $50 steps, but a thumb can't pass what is unassigned: pushing it further leaves it where it stopped. To give one category more, lower another first. The figure beside the bar always says how much is still unassigned.

A new total takes effect as you type, as long as it is a whole amount up to $1,000,000 and not below what the categories already add up to; otherwise the old total stays and a sentence under the box says why. The sliders' range, the share bar and the percents all follow the total.

They are worked out by largest remainder: every share is rounded down, and the leftover points go to the shares with the biggest fractions. The unassigned part counts as a share too, so a half-assigned budget still adds to 100.

Everything: Set budgets says "Saved in this demo." and nothing leaves the page. In your app send total and budgets from confirm once nothing is unassigned, and load saved amounts into START. The four categories are typed in CATEGORIES.

It takes whole numbers only, with no limit enforced as you type. The sliders' range follows as you type. Arabic-Indic digits typed on a right-to-left page are read as ordinary digits.

The four cells stack in one column with full-width sliders, the share list wraps in two columns under the bar, and Set budgets pins to the bottom of the screen with its status line.