index-main/site/plugins/beforeafter/snippets/blocks/beforeafter.php

<?php
/** @var \Kirby\Cms\Block $block */
$imageBefore = $block->imageBefore()->toFile();
$imageAfter = $block->imageAfter()->toFile();
$caption = $block->caption()->value();
?>

<?php if ($imageBefore || $imageAfter): ?>
<div class="container slider-before-after">
    <div class="image-container">
        <?php if ($imageBefore): ?>
        <img class="image-before slider-image"
             src="<?= $imageBefore->url() ?>"
             alt="<?= $imageBefore->alt()->or('Image avant')->esc() ?>" />
        <?php endif ?>

        <?php if ($imageAfter): ?>
        <img class="image-after slider-image"
             src="<?= $imageAfter->url() ?>"
             alt="<?= $imageAfter->alt()->or('Image après')->esc() ?>" />
        <?php endif ?>
    </div>

    <input
        type="range"
        min="0"
        max="100"
        value="50"
        aria-label="Pourcentage de la photo avant affichée"
        class="slider"
    />
    <div class="slider-line" aria-hidden="true"></div>
    <div class="slider-button" aria-hidden="true">
        <svg
            xmlns="http://www.w3.org/2000/svg"
            width="30"
            height="30"
            fill="currentColor"
            viewBox="0 0 256 256"
        >
            <rect width="256" height="256" fill="none"></rect>
            <line
                x1="128"
                y1="40"
                x2="128"
                y2="216"
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="16"
            ></line>
            <line
                x1="96"
                y1="128"
                x2="16"
                y2="128"
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="16"
            ></line>
            <polyline
                points="48 160 16 128 48 96"
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="16"
            ></polyline>
            <line
                x1="160"
                y1="128"
                x2="240"
                y2="128"
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="16"
            ></line>
            <polyline
                points="208 96 240 128 208 160"
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="16"
            ></polyline>
        </svg>
    </div>
</div>

<?php if ($caption): ?>
<p class="caption"><?= $caption ?></p>
<?php endif ?>
<?php endif ?>