shadcn.io is not affiliated with official shadcn/ui
Investment Range Franchise Contact Block for Solid
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 Solid with Ark 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?
A button opens a popup with a search field and the list; typing narrows it, and choosing a territory closes the popup and puts the name on the button. 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.