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"
/>