Usage Slider Pricing Block for React

Edit the constants at the top of the file: BASE_PRICE, INCLUDED (searches the base plan covers) and OVERAGE_RATE (dollars per thousand searches past that). STOPS lists the volumes the slider can land on, closer together at the low end so each step is a similar jump in scale; the slider moves over their indexes. MARKS picks which stops get a shortcut under the track, and START the first one shown. The overage is the searches past the quota, in thousands, times the rate, rounded to a whole dollar; the total is the base plus that.

The bar stands for the month's searches. Its solid part is the share the base plan covers, at most INCLUDED, and the lighter part is what is billed as overage, so it shifts toward the lighter tone as you drag past the quota. The legend under it says the same in numbers, "50K of 50K included, 200K past the included". The bar is decorative; the numbers carry the meaning.

Yes. It is named "Searches a month" and reads its value as words, "1 million searches", rather than an index; the arrow keys, Home, End and Page Up and Down work. The shortcuts under the track are real buttons, each named with its volume. A polite live region reads the volume and the bill after each change.

The button is a real link. It's a ShineButton with render set to an a element and nativeButton={false}. Add the chosen volume to the query, for example /signup?plan=base&volume=250000, so the account starts with a sensible alert threshold. On a phone the same link lives in the sticky bar, and the one in the bill panel is hidden below md.

The slider band keeps its short height, the meter and the itemised bill follow, and a sticky bar at the bottom of the section holds the estimated bill and the button, so you can drag and watch the price without scrolling. The feature cells stack into one column.

The primary colour marks one control per block, here the call to action. The slider's fill and thumb use the foreground colour instead, so they read in every theme and in dark mode.