Team Size Slider With Volume Discounts Block for React

Edit the constants at the top of the file. LIST_PRICE is the monthly price of one seat, MIN_SEATS and MAX_SEATS are the ends of the slider, START_SEATS is where it opens, and DISCOUNTS lists the seat count each discount starts at and its percentage. The ticks under the track, the shortcut buttons, the discount badge, the seat price and the total are all computed from them, so they can't disagree. Amounts are rounded to the cent, so 30 seats at 20% off are $336.00 and a total never carries a stray fraction of a cent.

The call to action is a real link and its text follows the seat count. It's a ShineButton with render set to an a element and nativeButton={false}. Build its href from seats, for example /checkout?seats=24, and create the subscription with a per-unit price and that quantity. Let your billing provider apply the discount from the quantity, so the price you show and the price you charge come from one rule.

Yes. The slider is named "Seats on your team" and reads its value in words ("24 seats"), and it moves with the arrow keys, Page Up and Page Down, Home and End. The shortcuts are buttons named for their step ("10 seats, 10% off") that report whether they are the current choice. Once a drag or a key press ends, a polite live region says the seat count, the discount, the seat price and the total, so a screen reader hears it once rather than at every step. The large riding number and the ticks repeat that information, so they're hidden from assistive technology.

The header's shortcuts move under the sentence, and the slider's panel comes first with its count riding the thumb. The total and the call to action sit in a bar that sticks to the foot of the section while the visitor drags, so the number they're changing and the button are always on screen together. The bar scrolls away with the block; it isn't fixed to the page. In right-to-left pages the slider, the ticks and the riding count mirror.

A table makes visitors do arithmetic: find your bracket, multiply, remember the discount. A slider answers the only question they have, what will my team pay, and the ticks show where the next saving starts, so someone at 9 seats sees that one more seat lowers the price of all ten. Keep the table when your brackets are the story, as in the volume discount block.