Full-Width Before After Slider Hero Block for React

Each side of the panel is one layer that fills it: the after layer underneath, the before layer on top, clipped at the handle. Replace either layer's CheckoutPage with an img that fills it (size-full object-cover), and use two images of the same size and framing so they line up under the divider. The layers are hidden from screen readers, so describe the change in the panel's caption, and keep the Before and After labels, which sit above both layers.

The handle is our Slider, spread over the whole panel, with its track hidden and its thumb drawn as the round handle. Press anywhere on the panel and the handle jumps there, then follows your drag. Its value is written to the panel as a CSS variable, --split, and from it a second one, --edge, places the divide under the handle's centre: the before layer's clip-path, the divider line and the grip icon all read it. Nothing is measured in JavaScript.

Yes. The handle is a slider named Compare before and after: Tab reaches it, the arrow keys move it one step, Page Up and Page Down ten, Home and End to either side, and it reads its value as 60% before, 40% after. The drawn pages are decoration, hidden from assistive technology, and an invisible caption gives the score and the largest paint on each side. The headline is the block's one h1, and the results band is a description list.

From the same two reports that draw the pages. BEFORE and AFTER at the top of the file hold the largest paint in milliseconds, the JavaScript shipped in kilobytes and the score, and the band's first and third figures are computed from them (a 5x faster paint, 54% less JavaScript), so the band can't drift from the pages. Change a report and both follow.

The panel is 18rem tall on a phone, 20rem from sm and 26rem from md, and the drawn page drops its image and navigation on a phone so it stays readable. A sideways drag moves the handle, while an upward or downward swipe still scrolls the page, so the panel never traps the visitor. The headline and both actions are on the first screen, and the results band sits two by two, then one row of four from md.

Both are links to #; point them at your sign-up and your case studies. On Base UI, each button renders its link with render={<a href="/start" />} and nativeButton={false}.