Shopify Image Comparison Slider – Before & After Showcase

                    <!-- 
========================================
Section Name: Image Comparison
Tech Stack: Liquid, HTML, CSS, JavaScript
What This Section Does: 
- Displays an interactive slider for comparing two images side-by-side.
- Features a draggable handle for seamless comparison between images.
- Includes customizable initial position and background settings.
- Fully responsive design that maintains aspect ratio across devices.

Promotion: 
Showcase your product transformations with an engaging image comparison slider. Perfect for before/after demonstrations or product variations. Get it now at [PrebuiltTemplates](https://prebuilttemplates.com/).
========================================
-->
<section class="image-comparison-section" style="background-color: {{ section.settings.background_color }}; padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;">
  <div class="image-comparison-container">
    <div class="image-comparison-wrapper">
      <input class="comparison-slider" type="range" min="0" max="100" value="{{ section.settings.initial_position }}" aria-label="Image comparison slider" />
      <div class="comparison-drag-handle">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="drag-icon">
          <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15 12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" />
        </svg>
      </div>
      {% if section.settings.image_dark != blank %}
        <img class="comparison-image dark-image" src="{{ section.settings.image_dark | img_url: 'master' }}" alt="{{ section.settings.image_dark_alt | escape }}" />
      {% else %}
        {{ 'image' | placeholder_svg_tag: 'comparison-image dark-image placeholder' }}
      {% endif %}
      
      {% if section.settings.image_light != blank %}
        <img class="comparison-image light-image" src="{{ section.settings.image_light | img_url: 'master' }}" alt="{{ section.settings.image_light_alt | escape }}" />
      {% else %}
        {{ 'image' | placeholder_svg_tag: 'comparison-image light-image placeholder' }}
      {% endif %}
    </div>
  </div>
</section>

<style>
  .image-comparison-section {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    position: relative;
  }
  
  .image-comparison-container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .image-comparison-wrapper {
    position: relative;
    margin: 0 auto;
    border: 2px solid rgba(128, 128, 128, 0.3);
    container-type: inline-size;
    width: clamp(300px, 80vmin, 1080px);
    aspect-ratio: 4 / 3;
    box-shadow: 0 1rem 2rem -1rem rgba(0, 0, 0, 0.6);
    overflow: hidden;
  }
  
  .comparison-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  
  .light-image {
    clip-path: inset(0 0 0 calc(var(--compare, {{ section.settings.initial_position }}) * 1%));
  }
  
  .comparison-slider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: grab;
    z-index: 10;
  }
  
  .comparison-slider:active {
    cursor: grabbing;
  }
  
  .comparison-drag-handle {
    height: 40px;
    aspect-ratio: 1;
    border-radius: 50%;
    position: absolute;
    z-index: 5;
    top: 50%;
    left: calc(var(--compare, {{ section.settings.initial_position }}) * 1%);
    rotate: 90deg;
    translate: -50% -50%;
    color: #fff;
    background: #000;
    border: 2px solid rgba(128, 128, 128, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  
  .drag-icon {
    width: 24px;
    height: 24px;
  }
  
  .comparison-slider:active + .comparison-drag-handle {
    background: rgba(0, 0, 0, 0.8);
    opacity: 0.8;
  }
  
  .placeholder {
    background-color: #f0f0f0;
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const sliders = document.querySelectorAll('.comparison-slider');
    
    class Slider {
      constructor(element) {
        const input = element;
        const sync = () => {
          const val = (input.value - input.min) / (input.max - input.min);
          document.documentElement.style.setProperty('--compare', Math.round(val * 100));
        };
        input.addEventListener('input', sync);
        input.addEventListener('pointerdown', sync);
        sync();
      }
    }
    
    for (const slider of sliders) new Slider(slider);
  });
</script>

{% schema %}
{
  "name": "Image Comparison",
  "settings": [
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#000000"
    },
    {
      "type": "range",
      "id": "padding_top",
      "label": "Padding Top",
      "default": 60,
      "min": 0,
      "max": 100,
      "step": 5
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "label": "Padding Bottom",
      "default": 60,
      "min": 0,
      "max": 100,
      "step": 5
    },
    {
      "type": "range",
      "id": "initial_position",
      "label": "Initial Slider Position",
      "default": 50,
      "min": 0,
      "max": 100,
      "step": 1
    },
    {
      "type": "image_picker",
      "id": "image_dark",
      "label": "Dark Image (Left Side)"
    },
    {
      "type": "text",
      "id": "image_dark_alt",
      "label": "Dark Image Alt Text",
      "default": "Dark theme image"
    },
    {
      "type": "image_picker",
      "id": "image_light",
      "label": "Light Image (Right Side)"
    },
    {
      "type": "text",
      "id": "image_light_alt",
      "label": "Light Image Alt Text",
      "default": "Light theme image"
    }
  ],
  "presets": [
    {
      "name": "Image Comparison",
      "category": "Interactive"
    }
  ]
}
{% endschema %}