Shopify before/after slider
without an app.

{% comment %}
  Jelonyx · Before/After Slider : no app required
  Compatible with Dawn 12+, Horizon, and most Online Store 2.0 themes
  Source: jelonyx.com/shopify/no-app/before-after-slider
{% endcomment %}

{%- comment -%}
  Configuration : edit these values:
    jlx_before_img   : The "before" image. Default: product.images[0] (first product image).
    jlx_after_img    : The "after" image.  Default: product.images[1] (second product image).
    jlx_before_label : Label shown over the before half.
    jlx_after_label  : Label shown over the after half.
    jlx_start_pct    : Initial divider position as a percentage (0–100). Default: 50.

  To use a specific image by index:
    {%- assign jlx_before_img = product.images[2] -%}

  To use a specific image by src URL (useful for page sections):
    {%- assign jlx_before_src = 'https://cdn.shopify.com/s/files/...' -%}
    (see the src attribute in the img tag below)
{%- endcomment -%}

{%- assign jlx_before_img   = product.images[0] -%}
{%- assign jlx_after_img    = product.images[1] -%}
{%- assign jlx_before_label = 'Before' -%}
{%- assign jlx_after_label  = 'After' -%}
{%- assign jlx_start_pct    = 50 -%}

{%- if jlx_before_img == nil or jlx_after_img == nil -%}
  {%- comment -%}One or both images are missing: do not render the slider.{%- endcomment -%}
{%- else -%}

{%- assign jlx_slider_id = 'jlx-slider-' | append: jlx_before_img.id -%}

<div
  class="jlx-slider"
  id="{{ jlx_slider_id }}"
  role="group"
  aria-label="Before and after image comparison"
>
  <!-- After image (base layer, sets the container height) -->
  <div class="jlx-slider__after">
    <img
      class="jlx-slider__img"
      src="{{ jlx_after_img | image_url: width: 1200 }}"
      alt="{{ jlx_after_img.alt | default: jlx_after_label | escape }}"
      width="{{ jlx_after_img.width }}"
      height="{{ jlx_after_img.height }}"
      loading="lazy"
    >
    <span class="jlx-slider__label jlx-slider__label--after" aria-hidden="true">{{ jlx_after_label }}</span>
  </div>

  <!-- Before image (clipped overlay, reveals as handle moves right) -->
  <div class="jlx-slider__before" aria-hidden="true">
    <img
      class="jlx-slider__img"
      src="{{ jlx_before_img | image_url: width: 1200 }}"
      alt="{{ jlx_before_img.alt | default: jlx_before_label | escape }}"
      width="{{ jlx_before_img.width }}"
      height="{{ jlx_before_img.height }}"
    >
    <span class="jlx-slider__label jlx-slider__label--before" aria-hidden="true">{{ jlx_before_label }}</span>
  </div>

  <!-- Drag handle -->
  <div
    class="jlx-slider__handle"
    role="slider"
    aria-label="Drag to compare before and after"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-valuenow="{{ jlx_start_pct }}"
    tabindex="0"
  >
    <div class="jlx-slider__line" aria-hidden="true"></div>
    <div class="jlx-slider__btn" aria-hidden="true">
      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true">
        <path d="M6 4L2 9l4 5M12 4l4 5-4 5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>
  </div>
</div>

<style>
  #{{ jlx_slider_id }}.jlx-slider {
    position: relative;
    overflow: hidden;
    cursor: ew-resize;
    user-select: none;
    touch-action: none;
    border-radius: var(--media-radius, var(--inputs-radius, 4px));
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  #{{ jlx_slider_id }} .jlx-slider__after {
    display: block;
    position: relative;
  }
  #{{ jlx_slider_id }} .jlx-slider__img {
    display: block;
    width: 100%;
    height: auto;
  }
  #{{ jlx_slider_id }} .jlx-slider__before {
    position: absolute;
    inset: 0;
    clip-path: inset(0 50% 0 0);
    pointer-events: none;
  }
  #{{ jlx_slider_id }} .jlx-slider__before .jlx-slider__img {
    height: 100%;
    object-fit: cover;
  }
  #{{ jlx_slider_id }} .jlx-slider__label {
    position: absolute;
    bottom: 12px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 3px;
    pointer-events: none;
  }
  #{{ jlx_slider_id }} .jlx-slider__label--before { left: 12px; }
  #{{ jlx_slider_id }} .jlx-slider__label--after  { right: 12px; }
  #{{ jlx_slider_id }} .jlx-slider__handle {
    position: absolute;
    inset-block: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    outline: none;
    pointer-events: none;
  }
  #{{ jlx_slider_id }} .jlx-slider__line {
    position: absolute;
    inset-block: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: #fff;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
  }
  #{{ jlx_slider_id }} .jlx-slider__btn {
    position: relative;
    z-index: 2;
    width: 38px;
    height: 38px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
    color: #1a1a1a;
    transition: transform 0.1s ease;
  }
  #{{ jlx_slider_id }}:active .jlx-slider__btn,
  #{{ jlx_slider_id }}:focus-within .jlx-slider__btn {
    transform: scale(1.08);
  }
  #{{ jlx_slider_id }} .jlx-slider__handle:focus-visible + .jlx-slider__btn,
  #{{ jlx_slider_id }}:focus-within .jlx-slider__line {
    box-shadow: 0 0 0 2px #007aff, 0 0 6px rgba(0, 0, 0, 0.25);
  }
</style>

<script>
  (function () {
    'use strict';
    var slider    = document.getElementById('{{ jlx_slider_id | escape }}');
    if (!slider) return;
    var beforeDiv = slider.querySelector('.jlx-slider__before');
    var handle    = slider.querySelector('.jlx-slider__handle');
    if (!beforeDiv || !handle) return;

    var pct      = {{ jlx_start_pct }};
    var dragging = false;

    function clamp(v, lo, hi) { return v < lo ? lo : v > hi ? hi : v; }

    function setPosition(p) {
      pct = clamp(p, 0, 100);
      var right = (100 - pct).toFixed(2);
      beforeDiv.style.clipPath = 'inset(0 ' + right + '% 0 0)';
      handle.style.left = pct + '%';
      handle.setAttribute('aria-valuenow', Math.round(pct));
    }

    function pctFromClient(clientX) {
      var rect = slider.getBoundingClientRect();
      return ((clientX - rect.left) / rect.width) * 100;
    }

    // Mouse
    slider.addEventListener('mousedown', function (e) {
      if (e.button !== 0) return;
      dragging = true;
      setPosition(pctFromClient(e.clientX));
      e.preventDefault();
    });
    document.addEventListener('mousemove', function (e) {
      if (dragging) setPosition(pctFromClient(e.clientX));
    });
    document.addEventListener('mouseup', function () { dragging = false; });

    // Touch
    slider.addEventListener('touchstart', function (e) {
      dragging = true;
      setPosition(pctFromClient(e.touches[0].clientX));
    }, { passive: true });
    slider.addEventListener('touchmove', function (e) {
      if (!dragging) return;
      setPosition(pctFromClient(e.touches[0].clientX));
      e.preventDefault();
    }, { passive: false });
    slider.addEventListener('touchend', function () { dragging = false; }, { passive: true });

    // Keyboard (arrows move 2%; Shift+arrow moves 10%)
    handle.addEventListener('keydown', function (e) {
      var step = e.shiftKey ? 10 : 2;
      if (e.key === 'ArrowLeft')  { setPosition(pct - step); e.preventDefault(); }
      if (e.key === 'ArrowRight') { setPosition(pct + step); e.preventDefault(); }
      if (e.key === 'Home')       { setPosition(0);   e.preventDefault(); }
      if (e.key === 'End')        { setPosition(100); e.preventDefault(); }
    });

    // Init
    setPosition(pct);
  })();
</script>

{%- endif -%}