Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA before and after comparison with a draggable divider that is also a keyboard slider, for photos, edits and redesigns.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
before and after take any React node, so you can compare two renders of a UI. With interaction="hover" the divider follows the pointer without a press.
| Prop | Type | Default | Description |
|---|---|---|---|
before | ReactNode | - | Content on the start side (left, or top when vertical). |
after | ReactNode | - | Content on the end side. |
beforeLabel | string | "Before" | Chip text and part of the slider's accessible name. |
afterLabel | string | "After" | Chip text and part of the slider's accessible name. |
defaultValue | number | 50 | Divider position in percent when uncontrolled. |
value | number | - | Divider position in percent when controlled. |
onValueChange | (value: number) => void | - | Called while the divider moves. |
orientation | "horizontal" | "vertical" | "horizontal" | Split direction. |
interaction | "drag" | "hover" | "drag" | Drag while pressed, or follow the pointer. |
step | number | 1 | Arrow key step in percent. Page Up and Page Down move 10x. |
hideLabels | boolean | false | Hide the corner chips. |
className | string | - | Defaults to a 16:10 box; pass an aspect-* class to resize. |
Also accepts all div props.
slider with aria-valuetext such as "42% Raw, 58% Graded". Arrow keys move by step, Page Up and Page Down by ten steps, Home and End jump to the edges.alt text, or alt="" if the comparison is decorative.