Contract Length Slider Pricing Block for React

The constants at the top of the file set it: MIN_MONTHS and MAX_MONTHS bound the slider, and ONE_MONTH, ONE_YEAR and TWO_YEARS are the monthly prices you actually sell at 1, 12 and 24 months. centsFor draws a straight line between them for every term in between, in whole cents, so the price never falls out of step with your price list. The discount, the total and the savings are all worked out from that price, so they stay in step. Replace centsFor with a table if you sell only fixed terms.

Each anchor in ANCHORS is placed at its term's position along the track (positionOf), so it sits under the thumb's centre at that term. The thumb stays inside the track's ends, so the row is inset by half the thumb (mx-1.5, for the default style's 12px thumb; match it if your style's thumb is larger). The first and last labels are aligned to the track's ends instead of centred, so they never spill past the card. The row is positioned with logical properties, so in a right-to-left layout the labels follow the slider to the other side. Anchors marked wide only show from the sm breakpoint up, leaving monthly, annual and two years on a phone.

The slider is labelled Contract length and reads its value as a term, such as 12 months, rather than a bare number: getAriaValueText receives the formatted value, the number and the thumb's index. Each anchor is a button named by its visible text. The prices keep their full value in visually hidden text, not a live region, so a screen reader reads them when it reaches them and nothing is announced while the thumb moves. The discount badge reads as "58% off" rather than a bare minus sign.

Below lg the card's own button is removed from the layout and a bar takes its place: the total for the chosen term on one side, a Shine Button on the other, stuck to the bottom of the section with sticky bottom-0 so it stays on screen while you drag the slider and leaves with the section when you scroll past it. It sits inside the section's grid, spanning all of its rows, so it needs no JavaScript. Its label is fixed ("Lock in this rate") so the button never changes width as the term changes.

The call to action is a link: point its href at your checkout route with the term in the query (/checkout?months=12), or swap it for a button that posts months to your server. Work out the price again on the server from the term, never from the page, and map each term to a price in your billing provider. Both the card's button and the phone bar are links, so change both.

Send an event when the drag ends, not on every step: onValueCommitted fires once with the final value. Log the anchor presses too, to see which terms people jump to and which they drag to.