Before / After Slider

{%- comment -%} modblo. Before / After Slider {%- endcomment -%}
<section class="modblo-ba" data-section-id="{{ section.id }}"
  style="--modblo-bg: {{ section.settings.bg }}; --modblo-fg: {{ section.settings.fg }}; --modblo-handle: {{ section.settings.handle_color }};">
  <div class="modblo-ba__inner page-width">
    {%- if section.settings.heading != blank -%}
      <h2 class="modblo-ba__heading">{{ section.settings.heading }}</h2>
    {%- endif -%}
    {%- if section.settings.subheading != blank -%}
      <p class="modblo-ba__sub">{{ section.settings.subheading }}</p>
    {%- endif -%}

    <div class="modblo-ba__compare" data-modblo-ba role="group" aria-label="Before and after comparison slider">
      <div class="modblo-ba__layer modblo-ba__after" aria-hidden="false">
        {%- if section.settings.after_image != blank -%}
          {{ section.settings.after_image | image_url: width: 1800 | image_tag:
            loading: 'lazy', widths: '600,1200,1800', sizes: '100vw', alt: 'After', class: 'modblo-ba__img' }}
        {%- endif -%}
        <span class="modblo-ba__label modblo-ba__label--after">{{ section.settings.after_label | default: 'After' }}</span>
      </div>
      <div class="modblo-ba__layer modblo-ba__before" data-clip>
        {%- if section.settings.before_image != blank -%}
          {{ section.settings.before_image | image_url: width: 1800 | image_tag:
            loading: 'lazy', widths: '600,1200,1800', sizes: '100vw', alt: 'Before', class: 'modblo-ba__img' }}
        {%- endif -%}
        <span class="modblo-ba__label modblo-ba__label--before">{{ section.settings.before_label | default: 'Before' }}</span>
      </div>
      <input type="range" min="0" max="100" value="50" step="0.1"
             aria-label="Before-after position"
             class="modblo-ba__range" data-range>
      <div class="modblo-ba__handle" data-handle aria-hidden="true">
        <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
          <path d="M8 6l-4 6 4 6M16 6l4 6-4 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
    </div>
  </div>
</section>

<style>
  .modblo-ba { background: var(--modblo-bg, #0b0b0c); color: var(--modblo-fg, #fafafa); padding: clamp(64px,10vw,128px) 0; }
  .modblo-ba__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
  .modblo-ba__heading { font-size: clamp(28px,4vw,44px); letter-spacing: -.025em; margin: 0 0 12px; max-width: 640px; }
  .modblo-ba__sub { font-size: 17px; opacity: .72; max-width: 560px; margin: 0 0 36px; }
  .modblo-ba__compare {
    position: relative; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden;
    user-select: none; touch-action: none;
    border: 1px solid color-mix(in oklab, var(--modblo-fg) 12%, transparent);
  }
  .modblo-ba__layer { position: absolute; inset: 0; }
  .modblo-ba__before { clip-path: inset(0 50% 0 0); }
  .modblo-ba__img { width: 100%; height: 100%; object-fit: cover; }
  .modblo-ba__label {
    position: absolute; top: 16px; padding: 6px 12px; font-size: 11px;
    text-transform: uppercase; letter-spacing: .14em; font-weight: 700;
    background: rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(6px); border-radius: 999px;
  }
  .modblo-ba__label--before { left: 16px; }
  .modblo-ba__label--after { right: 16px; }
  .modblo-ba__range {
    position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize;
  }
  .modblo-ba__handle {
    position: absolute; top: 0; bottom: 0; left: 50%; width: 44px;
    transform: translateX(-50%);
    pointer-events: none;
  }
  .modblo-ba__handle::before {
    content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
    width: 2px; transform: translateX(-50%);
    background: var(--modblo-handle, #fff);
  }
  .modblo-ba__handle svg {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: var(--modblo-handle, #fff); color: #0b0b0c;
    border-radius: 999px; padding: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
  }
</style>

<script>
  (function () {
    var roots = document.querySelectorAll('[data-section-id="{{ section.id }}"]');
    roots.forEach(function (root) {
      var compare = root.querySelector('[data-modblo-ba]');
      var range = root.querySelector('[data-range]');
      var handle = root.querySelector('[data-handle]');
      var clip = root.querySelector('[data-clip]');
      if (!compare || !range || !handle || !clip) return;
      function set(v) {
        clip.style.clipPath = 'inset(0 ' + (100 - v) + '% 0 0)';
        handle.style.left = v + '%';
      }
      range.addEventListener('input', function (e) { set(parseFloat(e.target.value)); });
      set(50);
    });
  })();
</script>

{% schema %}
{
  "name": "Before/After Slider",
  "tag": "section",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "See the difference." },
    { "type": "textarea", "id": "subheading", "label": "Subheading" },
    { "type": "image_picker", "id": "before_image", "label": "Before image" },
    { "type": "image_picker", "id": "after_image", "label": "After image" },
    { "type": "text", "id": "before_label", "label": "Before label", "default": "Before" },
    { "type": "text", "id": "after_label", "label": "After label", "default": "After" },
    { "type": "color", "id": "bg", "label": "Background", "default": "#0b0b0c" },
    { "type": "color", "id": "fg", "label": "Foreground", "default": "#fafafa" },
    { "type": "color", "id": "handle_color", "label": "Handle color", "default": "#ffffff" }
  ],
  "presets": [{ "name": "Before/After Slider" }]
}
{% endschema %}