nuxt-x-affiliate
Compare Slider
Before / after image compare slider — draggable divider in horizontal or vertical orientation.
Compare Slider
The XAFCompareSlider component renders two images stacked with a draggable divider that reveals more or less of each. Useful for before/after shots, product comparison shots, day/night photography, and any visual A/B comparison.
Components
<XAFCompareSlider />
<XAFCompareSlider
:before="{ src: '/img/before.jpg', alt: 'Without filter', label: 'Before' }"
:after="{ src: '/img/after.jpg', alt: 'With filter', label: 'After' }"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
before | CompareImage | required | Left/top image. |
after | CompareImage | required | Right/bottom image. |
initial | number | 50 | Initial slider position (0–100). |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Slider orientation. |
Image shape
interface CompareImage {
src: string
alt: string
label?: string
}
The divider is mouse- and touch-draggable. The handle button reports aria-label="Compare slider at {n}%" so screen readers can announce position changes on focus.
AI Context
component: XAFCompareSlider
package: "@xenterprises/nuxt-x-affiliate"
use-when: Before/after image compare slider with draggable divider, horizontal or vertical orientation.