Budget Range Slider Contact Block for React

Each thumb is its own stop for the keyboard: Tab to the first one and the arrow keys move it in steps of $1,000; Tab again for the second. The thumbs never cross, and they stay at least two steps ($2,000) apart. The thumbs are named "Lowest budget" and "Highest budget". The range in large type is the visible value. The dots and their amounts under the track are decoration, hidden from assistive technology. When you stop moving a thumb, or change the job, one hidden status line reads the new sentence.

From SCOPES at the top of the file: each kind of job has an example rate in dollars for each square foot of roof ($40 for a repair, $9 for a replacement, $14 for a new build). The sentence divides the two ends of the range by that rate and rounds to the nearest hundred square feet. The rates are made up, the sentence ends with "Example only." and none of it is a quote.

The form has noValidate, so the browser's own bubbles stay away and the block shows its own messages. On submit, problems checks a name, an email address with an @ and a domain, and a start time. Each problem appears under its field with an icon, the control is marked invalid and described by the message, and focus moves to the first one. Leaving a filled field checks it, and editing a field that shows an error re-checks it as you type.

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 your own call: details holds the kind of job, the two ends of the budget, the name, the email and the start time. The confirmation repeats the job, the range and the start time and says a roofer will write to the address given; it promises nothing else.

No. quotes@rooflark.example uses the .example domain, which is reserved for examples, and +1 (415) 555-0174 is in the 555-0100 to 555-0199 range set aside for fiction. Replace EMAIL, PHONE, PHONE_HREF and HOURS at the top of the file with yours. The phone number keeps its order in a right-to-left layout.

The three job tiles stack, the slider takes the whole width of the panel with its five dots under it, and name, email and start time go one per row. The sentence under the slider and the example line keep their height as the job changes, so nothing below them moves. The button goes full width.