# Compare

> Before/after image comparison slider split by a blade of light: a white-hot seam with a chromatic fringe, pulses running along it and a trail that stretches with the speed of the gesture.

- Package: `fancy-ui-vue` (Vue 3.5+ + Tailwind CSS v4)
- Category: Media
- Tags: media, image, slider, comparison, before-after, interactive
- Types: `CompareProps`, `StarFieldProps`
- Docs: https://fancy-ui.rama.app/docs/components/compare
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/vue/src/components/compare

## Import

```vue
<script setup lang="ts">
import { Compare } from 'fancy-ui-vue';
</script>
```

Setup (once per project): `npm install fancy-ui-vue`, then put these lines in your main CSS file (the stylesheet imports go right after `@import "tailwindcss";`):

```css
@import "tailwindcss";
@import "fancy-ui-vue/tailwind.css";
@import "fancy-ui-vue/styles.css";
```

Full guide: https://fancy-ui.rama.app/llms.txt

The names below are the ones to write in a Vue template; when one differs from the Svelte name, the Svelte name follows in parentheses. Snippets become named slots (`#default` is the default snippet), a prop the Vue port declares as a model is a `v-model:<name>` (except `ref`, exposed via `defineExpose({ ref })`: put a template ref on the component and read `.ref`) and callbacks are listeners (`onclick` is `@click`). Every component sets `inheritAttrs: false`: `class` is a declared prop, merged where the Svelte component applies it (not always the root element), and only when the props table below lists it; other attributes do not fall through unless the package README lists the component as forwarding native attributes. Divergences: https://github.com/RamaHerbin/fancy-ui/tree/main/vue#divergences-from-the-svelte-api

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `firstImage` | `string` | `""` | URL of the first (left) image |
| `secondImage` | `string` | `""` | URL of the second (right) image |
| `firstImageAlt` | `string` | `"First image"` | Alt text for the first image |
| `secondImageAlt` | `string` | `"Second image"` | Alt text for the second image |
| `firstContentClass` | `string` | `""` | CSS classes for the first content container |
| `secondContentClass` | `string` | `""` | CSS classes for the second content container |
| `initialSliderPercentage` | `number` | `50` | Initial slider position (0-100) |
| `slideMode` | `"hover" \| "drag"` | `"hover"` | How the slider is controlled |
| `showHandlebar` | `boolean` | `true` | Show the drag handle bar |
| `autoplay` | `boolean` | `false` | Automatically animate the slider back and forth |
| `autoplayDuration` | `number` | `5000` | Duration of one autoplay cycle in ms |
| `beamColors` | `string[]` | `["#22d3ee", "#818cf8", "#f472b6"]` | Beam colours: left fringe, centre, right fringe (one or more colours) |
| `label` | `string` | `"Comparison slider"` | Accessible name of the slider |
| `class` | `string` | `""` | Additional CSS classes for the root element |
| `@percentage-change` (Svelte `onpercentagechange`) | `(percentage: number) => void` | — | Called with the slider position (0-100) whenever it changes |
| `@drag-start` (Svelte `ondragstart`) | `() => void` | — | Called when a drag on the slider begins |
| `@drag-end` (Svelte `ondragend`) | `() => void` | — | Called when the drag ends |
| `@hover-enter` (Svelte `onhoverenter`) | `() => void` | — | Called when the pointer enters the comparison area |
| `@hover-leave` (Svelte `onhoverleave`) | `() => void` | — | Called when the pointer leaves the comparison area |

## Slots

| Slot | Description |
| --- | --- |
| `#firstContent` (Svelte `firstContent`) | Custom content to render in the first (left) panel instead of an image |
| `#secondContent` (Svelte `secondContent`) | Custom content to render in the second (right) panel instead of an image |
| `#handle` (Svelte `handle`) | Custom drag handle element |

## Example

No Vue example is published for this component yet: start from the import above and the props table. The full examples are Svelte-only, on https://fancy-ui.rama.app/docs/components/compare.md.