Drag Handle Responsive Comparator Features Block for React

A native input type="range" covers the part of the stage where the page's edge can be, and the page's width is the range's value. Because the input is the control, you get mouse and touch dragging, arrow keys, Page Up and Page Down, Home and End, and a screen-reader name and value without any pointer code. The line and grip you see are drawn from the same value. The range runs from 320 to 1280 pixels in steps of 10.

layoutOf holds the two breakpoints (640 and 1024) and returns phone, tablet or desktop. The page, ShopPage, sets a data-layout attribute and reads it with group variants (group-data-[layout=phone]/page:hidden), so a block of classes can say what changes at each width. Replace its contents with a drawing of your own product and keep the same attribute.

The presets are the quick path and the keyboard-friendly one: a click sets the width exactly. On a phone the stage is too narrow to drag in, so the handle and its range input are hidden below sm and the presets are the control, each a single tap. The page still reflows, and the stage keeps its height.

The segmented control is named "Preview width", and so is the range, which reads out its breakpoint and width in words. The page itself is decoration: it is aria-hidden and inert, so none of its text is read and none of its links take focus. A focus ring appears around the stage when the range has keyboard focus. The stage is drawn left to right in every language, since it is a picture of a page.

Yes. The page is bg-card, its blocks bg-muted, its one mock button bg-foreground text-background, and the edge handle is the foreground colour, so the section is light on a light page and dark on a dark one, and the Segment Group's selected segment is the only thing that changes with the choice.