shadcn.io is not affiliated with official shadcn/ui
Revenue Share Calculator Billing Block for Vue
A revenue share worked out on graduated slices: a slider for monthly referred revenue, a bar cut into the 10, 15 and 20 percent slices, what each slice pays, the effective rate, the total and where the top rate starts.
Installation
Overview
Let partners see what a month would pay before they commit, with this revenue share calculator for Vue with Ark UI. A Slider sets the monthly revenue your referrals bring ($0 to $60,000, $25,000 to start). Under it a bar is cut into the slices of each rate, drawn in three foreground weights: the first $5,000 at 10 percent, the next $15,000 at 15 and everything above $20,000 at 20, with a mark where the top rate starts. A list names what each slice pays ($500.00, $2,250.00 and $1,000.00 at $25,000) and a side cell shows the total in rolling Sliding Number digits, the effective rate (15.0 percent) and how far you are from the top rate. The Shine Button, "Apply to the program", is the only colored control; Guides draw the frame. For marketplaces, plugin stores and affiliate programs.
FAQ
How do I change the rates and the slices?
Edit TIERS: each has a from, a to and a rate in percent. The last one ends at MAX, the top of the slider. The commission on each slice, the total and the effective rate are derived from the tiers and the revenue, so adding a tier only means adding an object and one more weight to WEIGHTS.
What does graduated mean here?
Each rate applies only to the revenue inside its slice, not to the whole amount. At $25,000 the first $5,000 earns 10 percent, the next $15,000 earns 15 percent and the last $5,000 earns 20 percent: $500.00 plus $2,250.00 plus $1,000.00 is $3,750.00, an effective 15.0 percent. Crossing a tier never lowers what you earn.
How do I use the slider with a keyboard?
Focus the thumb and use the arrow keys to move in steps of $500, Home and End for the ends. It has a name, "Monthly referred revenue", and reads out its value as dollars a month. Horizontal arrows reverse in right-to-left pages.
What stays local, and how do I wire it up?
Apply only writes a line to the status area ("Applied for in this demo at $25,000 a month. Nothing was sent.") and sends nothing. To wire it up, post the chosen revenue (or the program the visitor wants) in the click handler and show the program's real tiers from your server.
Is the bar accessible?
The bar and its scale are decoration, hidden from assistive technology. The slice list carries the same numbers in text, each slice says how much revenue falls in it, and the total, the rate and the status sentence are real text. The slices differ by weight and by label, never by color.