# Before & after

A responsive comparison slider with clear labels, keyboard controls and a touch-friendly handle. Images stay on your own hosting, and the component keeps its styling separate from your site.

Version: 1.0.0
Page: https://tools.stuffonscreen.com/image-compare
Script: https://tools.stuffonscreen.com/widgets/v1.0.0/image-compare.js
Integrity: sha384-vPZzZnhq7rO7CwgLFtYpbNKamnAAq14Z8lTDbyGyydU/dfK4b3Hx5+Tkm/VxKN/c
Self-host ZIP: https://tools.stuffonscreen.com/widgets/v1.0.0/image-compare.zip
Licence: https://tools.stuffonscreen.com/licence

## Install

```html
<script src="https://tools.stuffonscreen.com/widgets/v1.0.0/image-compare.js" defer></script>
<sos-image-compare data-config="{&quot;before&quot;:&quot;https://tools.stuffonscreen.com/toolkit/demo-before.svg&quot;,&quot;after&quot;:&quot;https://tools.stuffonscreen.com/toolkit/demo-after.svg&quot;,&quot;beforeLabel&quot;:&quot;Before&quot;,&quot;afterLabel&quot;:&quot;After&quot;,&quot;alt&quot;:&quot;A website layout changes from a crowded grey page to a spacious green design.&quot;}"></sos-image-compare>
```

Keep the built-in visible credit (nofollow is allowed). The licence does not require a credit on exported files. Include scripts once per page.

## Configuration

The data-config attribute is a JSON object containing string values. When writing HTML, escape the JSON as an HTML attribute. Do not interpolate raw untrusted text. When creating an element in JavaScript, use element.setAttribute('data-config', JSON.stringify(config)).

- before: Before image URL. Use a publicly accessible HTTPS image with the same dimensions as the after image.
- after: After image URL. 
- beforeLabel: Before label. 
- afterLabel: After label. 
- alt: Describe the comparison. Describe what changes for people who cannot see the images.

Default configuration:

```json
{
  "before": "https://tools.stuffonscreen.com/toolkit/demo-before.svg",
  "after": "https://tools.stuffonscreen.com/toolkit/demo-after.svg",
  "beforeLabel": "Before",
  "afterLabel": "After",
  "alt": "A website layout changes from a crowded grey page to a spacious green design."
}
```

## Behaviour and limits

- Images are cropped to the same 16:10 frame using object-fit: cover. Match their dimensions and alignment for a fair comparison.
- The native slider supports touch, mouse, arrow keys, Home and End. Keep a useful description and both labels.
- Your image host receives image requests from visitors. We do not proxy, store or process the images.
- Invalid configurations show an error instead of a partial result. Updating data-config rerenders the component.
- Styling is isolated with Shadow DOM. There are no tracking cookies, paid API calls or remote configuration requests.
- Browser JavaScript is required. Essential business/event information should also be in normal HTML for indexing and no-JS users.

Framework/CSP instructions: https://tools.stuffonscreen.com/docs/implementation.md