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}
/>Summary
Functions
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 to50.class(:string) - Additional CSS classes for the root element. Defaults tonil.- Global attributes are accepted. HTML attributes forwarded to the root
<div>.