blatui

Components

Comparison Slider

A draggable before/after image comparison with a keyboard-operable divider.

php artisan blatui:add comparison-slider
Edited photo with full color Original photo, desaturated Before After 
<x-ui.comparison-slider
    before="https://picsum.photos/seed/blatui-before/800/533?grayscale"
    after="https://picsum.photos/seed/blatui-before/800/533"
    before-alt="Original photo, desaturated"
    after-alt="Edited photo with full color"
    before-label="Before"
    after-label="After"
    :value="50"
/>

No Labels

Sharpened render Blurred render 
<x-ui.comparison-slider
    before="https://picsum.photos/seed/blatui-scene/800/533?blur=4"
    after="https://picsum.photos/seed/blatui-scene/800/533"
    before-alt="Blurred render"
    after-alt="Sharpened render"
    :value="40"
/>

API Reference

Props, slots and exposed methods for <x-ui.comparison-slider>.

Props

Prop Type Default Description
after* string — Image src for the "after" side. This is the full base layer rendered underneath.
before* string — Image src for the "before" side. This layer is clipped on top, revealed up to the divider position.
beforeLabel string — Optional caption shown in the top corner of the "before" side (e.g. "Before").
afterLabel string — Optional caption shown in the top corner of the "after" side (e.g. "After").
beforeAlt string '' Alt text for the before image.
afterAlt string '' Alt text for the after image.
value int 50 Initial divider position as a percentage from 0 to 100.

* Required.