Before After Slider

<section class="sl-before-after" style="padding:clamp(32px,6vw,64px) 1rem;color:inherit;font-family:inherit;">
  <div style="max-width:960px;margin:0 auto;">
    <h2 style="text-align:center;font-size:clamp(1.5rem,3vw,2rem);margin:0 0 1.5rem;">{{ section.settings.heading }}</h2>
    <figure style="position:relative;margin:0;border-radius:.5rem;overflow:hidden;">
      <img src="{{ section.settings.after_image | default: 'https://picsum.photos/seed/after/1200/700' }}" alt="{{ section.settings.after_alt | default: 'After' }}" loading="lazy" style="width:100%;height:auto;display:block;" />
      <img src="{{ section.settings.before_image | default: 'https://picsum.photos/seed/before/1200/700' }}" alt="{{ section.settings.before_alt | default: 'Before' }}" loading="lazy" class="sl-ba-before" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 calc(100% - var(--sl-ba-pos,50%)) 0 0);" />
      <span style="position:absolute;top:.75rem;left:.75rem;padding:.25rem .6rem;border-radius:.25rem;font-size:.75rem;background:var(--sl-accent,#0a5cff);color:#fff;">{{ section.settings.before_label | default: 'Before' }}</span>
      <span style="position:absolute;top:.75rem;right:.75rem;padding:.25rem .6rem;border-radius:.25rem;font-size:.75rem;background:rgba(0,0,0,.6);color:#fff;">{{ section.settings.after_label | default: 'After' }}</span>
      <figcaption style="padding:.75rem 0 0;text-align:center;opacity:.8;font-size:.9rem;">{{ section.settings.caption }}</figcaption>
      <input type="range" min="0" max="100" value="{{ section.settings.start_position | default: 50 }}" aria-label="Compare before and after" oninput="this.parentNode.style.setProperty('--sl-ba-pos', this.value + '%')" style="position:absolute;bottom:1rem;left:10%;right:10%;width:80%;accent-color:var(--sl-accent,#0a5cff);" />
    </figure>
  </div>
</section>
{% schema %}
{
  "name": "Before After Slider",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "See the difference" },
    { "type": "image_picker", "id": "before_image", "label": "Before image" },
    { "type": "text", "id": "before_alt", "label": "Alt text (before)", "default": "Before" },
    { "type": "text", "id": "before_label", "label": "Before label", "default": "Before" },
    { "type": "image_picker", "id": "after_image", "label": "After image" },
    { "type": "text", "id": "after_alt", "label": "Alt text (after)", "default": "After" },
    { "type": "text", "id": "after_label", "label": "After label", "default": "After" },
    { "type": "range", "id": "start_position", "label": "Start position (%)", "min": 0, "max": 100, "step": 5, "default": 50 },
    { "type": "text", "id": "caption", "label": "Caption" }
  ],
  "presets": [{ "name": "Before After Slider" }]
}
{% endschema %}