Inputs

Before/After reveal handle

A draggable divider over two stacked scenes that reveals one on the left and the other on the right, moved by pointer, click to jump and arrow keys.

BeforeAfter

Using Before/After reveal handle

A draggable divider over two stacked scenes that reveals one on the left and the other on the right, moved by pointer, click to jump and arrow keys.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: position, handleColor, leftLabel, rightLabel

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The preview and component description are public. Sign in with an authorized account to open the code, framework versions and installation panel.

Connect your agent

Nearby

2795Elastic tug sliderInputsA slider that stretches like an elastic band when dragged past its ends, snapping the track back with a bounce once released.

2766Exposure dial sliderInputsA photo preview with a circular exposure readout in its corner above a draggable ruler of ticks that sets the exposure value in EV.

2788Vertical brightness sliderInputsA tall pill slider that fills with light from the bottom as you drag, resists past either end and springs back on release.

2791Single value sliderInputsA horizontal slider with one draggable thumb that fills the track behind it so the current value reads at a glance.

2297Addon Input GroupInputsA text field wrapped in one bordered shell that can carry a leading icon, a trailing button or text, and shares one focus ring across the whole group.

2108Appointment Range CardInputsA card that pairs a single-month date grid with a start-time and end-time field below it, for picking one day plus a time window in one compact block.