shadcn.io is not affiliated with official shadcn/ui
Investment Range Franchise Contact Block for React
A franchise enquiry with a two-thumb investment range that drives a band of four cells on shared hairlines (formats open, units, payback, fee) above a form with a searchable territory list.
Installation
Overview
A franchise enquiry section for React with Base UI, built around one control: an investment range from $80k to $400k on a slider with two thumbs. Under the slider, a band of four cells on shared hairlines follows the range: how many of the four store formats fit it, how many units are open, a typical payback in months and a typical fee, all worked out from fixed example data and labelled as examples. The four cells go two by two on a phone. Below the band, a form asks for a name, an email and a territory chosen from a searchable list. Submitting checks the fields, shows each problem under its field, marks the control invalid and moves focus to the first one; a valid enquiry turns into a confirmation in the same space that repeats the range and what it opens. It's built from Slider, Combobox, Field, Input, Guides, Shine Button and Button, with CSS transitions for the entrances and your theme's tokens for every colour. For franchisors that qualify investors before they send a pack.
FAQ
Where does the form send its data?
Nowhere yet. The submit handler waits 800 milliseconds, as a stand-in for a request, then shows the confirmation. Replace that timer in submit with a call to your franchise team's inbox or CRM: details holds the name and email, range the two ends in thousands of dollars and territory the chosen name. Show the confirmation when the request succeeds, and an error line in the form when it doesn't.
Where do the four figures come from?
From fixed example data. FORMATS lists four formats (a kiosk, a café, a bakehouse and a flagship), each with the least and most it costs to open and how many sites are still open. A format counts when its cost overlaps your range; units add up the open sites of those formats. Payback slides from 16 to 30 months with the middle of your range, and the fee is 6% of the middle of your range, with a 5% royalty noted under it. All of it is plain arithmetic in statsOf, labelled "Example figures only, not advice", so replace the terms with your own disclosure.
How does the slider announce itself?
Each thumb has its own name and says its amount in words ("From 120,000 dollars", "Up to 260,000 dollars"), and the thumbs stay at least two steps (20k) apart. When you let go, a hidden polite status line says the whole result once ("$120k to $260k: 3 of 4 formats, 26 units open, payback about 22 months"), so a screen reader isn't read every step of a drag. The track's range and thumbs take the text colour, never the primary colour.
How does the territory list work?
The field is a searchable input with a list under it: typing narrows the list, and choosing a territory puts its name in the field. If nothing matches it says "No territory found."
The territories are made up; replace TERRITORIES with yours, or with the regions you are still selling in.
Related
- Pro
Risk Profile Allocation Contact
Finance and propertyA portfolio inquiry for an advisory firm: a risk slider over five named profiles that redraws a stacked bar of stocks, bonds and cash at full width, then a short inquiry form on ruled bands.
- Pro
Budget Range Slider Contact
Quotes and estimatesA roofing quote request as a card in a card: three kinds of job, a two-thumb budget slider that says in words what the range covers, and a short form that checks itself.
- Pro
Loan Payment Slider Contact
Finance and propertyA personal-loan request for a lender: an amount slider with a tick at each $5,000 and a term to pick, a panel that works the monthly payment out as you move, and a form that checks itself.
- Pro
Talk to Sales Contact
Contact formsA talk-to-sales split for a scheduling platform: what happens next as three numbered steps and a band of contact details beside a form that checks itself, shows each problem under its field and confirms in place.
- Pro
Connected KPI Bar Stats
KPI bands and tilesFour headline figures for a subscription analytics tool in cells that share their hairlines from rail to rail, each with its change on the month before and a tiny sparkline of the last twelve months.
- Pro
Animal Cards Adoption Contact
ApplicationsAn adoption application that starts with four animal cells on shared hairlines and a slider for the hours a home is empty, with a list of the animals that suit you narrowing beside the form.