# `PhiaUi.Components.ImageComparison`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/media/image_comparison.ex#L1)

Image comparison slider — drag to reveal before/after images.

Inspired by PrimeReact `Compare`, shadcn custom implementations, Cloudinary widget.
Requires the `PhiaImageComparison` JS hook.

The before-image is revealed via `clip-path: inset(...)` controlled by the hook.
The divider handle is absolutely positioned and draggable (mouse + touch).

## Setup

Add the hook to your `app.js` (after `mix phia.install`):

    import PhiaImageComparison from "./hooks/image_comparison.js"
    let liveSocket = new LiveSocket("/live", Socket, {
      hooks: { PhiaImageComparison, ... }
    })

## Example

    <.image_comparison
      id="product-compare"
      before_src="/images/before.jpg"
      after_src="/images/after.jpg"
      before_label="Before"
      after_label="After"
      initial_position={40}
    />

# `image_comparison`

## Attributes

* `id` (`:string`) (required) - Unique element ID — required for the JS hook.
* `before_src` (`:string`) (required) - URL for the "before" image.
* `after_src` (`:string`) (required) - URL for the "after" image.
* `before_label` (`:string`) - Label overlaid on the before image. Defaults to `"Before"`.
* `after_label` (`:string`) - Label overlaid on the after image. Defaults to `"After"`.
* `initial_position` (`:integer`) - Initial divider position (0-100, percent from left). Defaults to `50`.
* `class` (`:string`) - Additional CSS classes for the root element. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root `<div>`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*