Negotiable Pricing Block for React

Edit the constants at the top of the file. LIST_PRICE is the price per seat per month and the marked tick. SEATS lists the team sizes the slider steps through and VOLUME_DISCOUNTS the discount each size earns, in the same order. TERMS lists the contract lengths with their discounts. NEGOTIATING_ROOM is how many dollars below the typical quote a negotiated one can go, which sets the low end of the band. SCALE is the span the bar and the ruler cover: keep the list price and the lowest quote inside it.

typicalOf takes the list price and applies the size's discount and the term's discount one after the other. highOf rounds that to whole dollars: the top of the range, the typical quote. lowOf rounds it NEGOTIATING_ROOM dollars lower: the bottom. At 250 seats on a 2-year term the discounts are 12% and 5%, which gives $22 at most and $20 at best, so the block shows "$20–$22". These are example numbers: replace typicalOf with your own pricing rules, and keep it a pure function, as the estimate, the scale and the phone's bar all read it.

Whatever you type becomes a ring on the scale, labelled "You $21", and a sentence under the field compares it with the band: inside the range, above it (we'd quote you less) or below it (sales will need to approve it). The button's label then names the number ("Send my $21 to sales"). Build the link from the state: seatIndex and termId pick the estimate and targetText is the target as typed, so a link like /contact-sales?seats=250&term=2&target=21 gives sales the whole conversation before the call. The field is a number input, so a phone shows a numeric keyboard.

Yes. The slider is named "Seats" and reads its value as "250 seats", and it moves with the arrow keys, Page Up and Page Down, Home and End. The contract length is a radio group named "Contract term". The field has a visible label and the verdict follows it. The scale and the large range are decorative copies, hidden from screen readers, which hear "$20 to $22 per seat per month" instead. When a drag or a key press ends, when the term changes and when the field is left, a polite live region says the estimate once, so a screen reader doesn't announce every step. The scale reads left to right even in right-to-left pages, as prices do.

The cells stack: the estimate and its scale first, then the seats slider and the target field. The in-panel button is hidden below the md breakpoint and a sticky bar at the foot of the screen shows the range, the seat count and the button, so a visitor can reach the call to action from any point in the section. The estimate scales down to fit at 320 pixels, and the ruler under it keeps its labels.