CynosureComponents / Controls
CompareSlider
Two versions of the same thing, one over the other, split by a divider people move to compare them.
When to useLink to "When to use"
- Before and after of an image edit, a redesign or a render, where the difference is in the detail.
Use something else when:
UsageLink to "Usage"
tsx
import { CompareSlider } from "@arshad-shah/cynosure";
<CompareSlider before={<img src={original} alt="Original" />} after={<img src={edited} alt="Edited" />} />before and after should be the same size. Control the divider with value and onChange (percent of the width showing before).
PropsLink to "Props"
| Prop | What it does | Type | Default |
|---|---|---|---|
beforeRequired | Shown on the start side of the divider (e.g. the original image). | ReactNode | |
afterRequired | Shown on the other side (e.g. the edited image). Both should be the same size. | ReactNode | |
value | Divider position: percent of the width showing before. | number | |
defaultValue | The divider's starting position when uncontrolled, 0 to 100. Default 50. | number | 50 |
onChange | Called as the divider moves (drag, click or keys), with the new position, 0 to 100. | ((value: number) => void) | |
showTags | Show the Before and After tags. Default true. | boolean | true |
labels | Replace the built-in English text: the divider's name, its spoken position and the two tags. | Partial<CompareSliderLabels> | |
className | Added to the root element, for layout. | string | |
style | Layout only. Restyle through --cy-compare-slider-* tokens. | CSSProperties |
Generated from the type definitions in @arshad-shah/cynosure 0.5.0.
Behaviour and accessibilityLink to "Behaviour and accessibility"
- Role: the divider is a slider named "Comparison", read as "40% before". Rename it and the tags with
labels. - Pointer: press anywhere on the picture to jump the divider there (and focus it), then drag; Escape mid-drag puts it back.
- Keyboard: arrows move 1%, Shift+arrows and Page Up/Down 10%, Home and End go to the ends.
- Touch: a sideways drag moves the divider at once and a tap jumps it; an upward or downward swipe scrolls the page. The divider's hit area is 44px on touch screens.
ThemingLink to "Theming"
Tokens: --cy-compare-slider-divider and --cy-compare-slider-grip-size.
RelatedLink to "Related"
These examples run Cynosure 0.5.0 (commit 50ce30b), the version on npm.