# Image Comparer

> Source: https://design.nanatec.co.ke/components/image-comparer/
> Compares two images (or any content) with a draggable slider, or a crossfade.

Compares two images (or any content) with a draggable slider, or a crossfade.

## Preview

Provide two layers via the `before` and `after` slots — any content works
(images, or plain markup as shown here). Drag the divider to compare.

```html
<nana-image-comparer style="width:100%;max-width:26rem">
  <div slot="before" style="aspect-ratio:3/2;display:grid;place-items:center;background:#1f6feb;color:#fff;font-weight:600;font-size:1.25rem">Before</div>
  <div slot="after" style="aspect-ratio:3/2;display:grid;place-items:center;background:#f59e0b;color:#111;font-weight:600;font-size:1.25rem">After</div>
</nana-image-comparer>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/image-comparer";
```

## Basic usage

```html
<nana-image-comparer>
  <img slot="before" src="/before.jpg" alt="Before" />
  <img slot="after" src="/after.jpg" alt="After" />
</nana-image-comparer>
```

## Fade variant

Set `variant="fade"` to crossfade between the two layers as you drag, instead
of the default clip slider.

```html
<nana-image-comparer variant="fade" style="width:100%;max-width:26rem">
  <div slot="before" style="aspect-ratio:3/2;display:grid;place-items:center;background:#1f6feb;color:#fff;font-weight:600;font-size:1.25rem">Before</div>
  <div slot="after" style="aspect-ratio:3/2;display:grid;place-items:center;background:#f59e0b;color:#111;font-weight:600;font-size:1.25rem">After</div>
</nana-image-comparer>
```

## API

## Events

| Event | Type | Description |
|---|---|---|
| `nana-change` | `CustomEvent` | Fired when the position changes (`detail.position`) |

## Slots

| Slot | Description |
|---|---|
| `before` | The "before" layer (overlaid / clipped) |
| `after` | The "after" layer (base, sets the size) |

## CSS Variables

| Variable | Default | Description |
|---|---|---|
| `--nana-image-comparer-divider` | — | Handle / divider colour |

## CSS Parts

| Part | Description |
|---|---|
| `base` | The container |
| `handle` | The drag handle |

## Accessibility

<ul class="a11y-grid not-content">
  <li>Keyboard accessible</li>
  <li>Screen-reader labels</li>
  <li>Focus-visible states</li>
  <li>ARIA roles and states</li>
  <li>WCAG 2.2 AA contrast</li>
</ul>

## Related components

<ul class="related not-content">
  <li><a href="/components/table/">Table</a></li>
  <li><a href="/components/carousel/">Carousel</a></li>
  <li><a href="/components/carousel-item/">Carousel Item</a></li>
  <li><a href="/components/qr-code/">QR Code</a></li>
  <li><a href="/components/icon/">Icon</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-image-comparer--docs