Side by Side Pricing Block for React

The figure draws the editor twice: the Free version fills the box, and the Pro version sits on top of it, clipped from the handle's position to the far edge with a CSS clip-path. The handle is a native <input type="range"> laid invisibly over the whole figure, so a pointer or finger drag anywhere moves it, and the grip and line follow its value. There is no drag code to maintain, and the figure doesn't use a motion library.

Yes. The range input is the one focusable element: Tab reaches it, the arrow keys move the handle one percent at a time, and Home and End jump to either edge. It's named "Compare Free and Pro" and its value text says where the split is. The two drawings are decoration, hidden from assistive technology, and the plans under them carry the same information as text, with a price, a description and a button each.

Only sideways. The range input uses touch-action: pan-y, so a finger moving up or down scrolls the page as usual and a finger moving across drags the handle. On a phone the adjustments panel is left out so the photo has room, and the two plans stack under the figure.

The figure's data are TOOLS (each with an icon and whether it is locked on Free) and ADJUSTMENTS; the Editor component draws the version for Free or for Pro, so add a lock or a difference there. The plans, with their prices, a line of what they include, and the button's text and href, are in PLANS. START is where the handle begins, 50 by default.

Each button is a real link. It's a ShineButton with render set to an a element and nativeButton={false}. Point Free at your download or sign-up page and Pro at a checkout with the trial, so the visitor lands on the plan they were looking at.

No, on purpose: it is a picture of a product's interface, so it stays left to right, with Free on the left and Pro on the right. The text around it, the header and the plans, follows the page's direction.