Guest Count Ruler Contact Block for React

Each guest costs the service and staff rate plus every course chosen. The rate falls with the size of the party ($32 under 50 guests, $28 from 50, $25 from 100, $22 from 200), set in RATES, and each dish has its own price in the lists at the top of the file. The total is the price per head times the guests. All the figures are made up for the demonstration, the button's note says so, and none of them is an offer.

Each need has the share of a party it usually covers (20% vegetarian, 8% vegan, 10% gluten-free, 6% nut-free, 12% halal, in DIETS). Tick one and the row says "about 24 guests", the count times the share, rounded up, which follows the slider. The caterer still asks for names and exact numbers; the block only shows what to expect. The line reserves its width, so ticking a box moves nothing.

It moves ten guests at a time with the arrow keys, Home goes to 10 and End to 300. The thumb is named "Number of guests" and a screen reader hears the value as "120 guests". The ruler is decoration, hidden from assistive technology; the number in large type is the visible value. When you stop moving, or choose a course, one hidden status line reads the count, the price per head and the total.

The form has noValidate, so the browser's own bubbles stay away and the block shows its own messages. On submit, problems checks a main course, a name and an email address with an @ and a domain; a starter and a dessert can be "No starter" and "No dessert". 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 guests, the three courses, the dietary needs, the name and the email. The confirmation repeats the count, the price per head, the total, the courses and the number of dietary needs, and says a coordinator will write to the address given; it promises nothing else.

The bands stack. The slider band shows the ruler (seven numbers fit across 320 pixels) with the price per head and the total side by side under it; the three selects follow, then the dietary list, the name and the email, and a full-width button. The price figures keep their size as the count grows, so nothing below them moves.