Before After Image Slider

<div class="header">
  <h1>Before & After Slider</h1>
  <p>Drag the slider to compare images</p>
</div>

<div class="slider-container">
  <div class="comparison-slider" id="comparisonSlider">
    <div class="before-image"></div>
    <div class="after-image" id="afterImage"></div>
    <div class="slider-handle" id="sliderHandle">
      <div class="slider-button"></div>
    </div>
    <div class="label label-before">Before</div>
    <div class="label label-after">After</div>
  </div>
</div>

<div class="instructions">
  💡 Click and drag the slider handle or tap anywhere to compare
</div>

    * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .header {
            text-align: center;
            margin-bottom: 40px;
            color: white;
        }

        .header h1 {
            font-size: 2.5rem;
            font-weight: 300;
            margin-bottom: 10px;
            color: #00d9ec;
        }

        .header p {
            font-size: 1rem;
            opacity: 0.8;
        }

        .slider-container {
            position: relative;
            max-width: 800px;
            width: 100%;
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 15px 50px rgba(0, 217, 236, 0.3);
        }

        .comparison-slider {
            position: relative;
            width: 100%;
            height: 600px;
            overflow: hidden;
            user-select: none;
        }

        .before-image,
        .after-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
        }

        .before-image {
            background-image: url('https://images.unsplash.com/photo-1566738780863-f9608f88f3a9?w=800&h=600&fit=crop');
            z-index: 1;
        }

        .after-image {
            background-image: url('https://images.unsplash.com/photo-1566737236500-c8ac43014a67?w=800&h=600&fit=crop');
            clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
            z-index: 2;
        }

        .slider-handle {
            position: absolute;
            top: 0;
            left: 50%;
            width: 4px;
            height: 100%;
            background: #00d9ec;
            cursor: ew-resize;
            z-index: 3;
            transform: translateX(-50%);
        }

        .slider-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            background: #00d9ec;
            border-radius: 50%;
            border: 4px solid white;
            cursor: ew-resize;
            box-shadow: 0 4px 15px rgba(0, 217, 236, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s ease;
        }

        .slider-button:hover {
            transform: translate(-50%, -50%) scale(1.1);
        }

        .slider-button::before,
        .slider-button::after {
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            border-style: solid;
        }

        .slider-button::before {
            border-width: 10px 15px 10px 0;
            border-color: transparent white transparent transparent;
            left: 12px;
        }

        .slider-button::after {
            border-width: 10px 0 10px 15px;
            border-color: transparent transparent transparent white;
            right: 12px;
        }

        .label {
            position: absolute;
            top: 20px;
            padding: 10px 20px;
            background: rgba(0, 217, 236, 0.9);
            color: white;
            font-weight: 600;
            border-radius: 5px;
            z-index: 4;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .label-before {
            right: 20px;
        }

        .label-after {
            left: 20px;
        }

        .instructions {
            margin-top: 30px;
            text-align: center;
            color: white;
            font-size: 0.95rem;
            opacity: 0.7;
        }

        @media (max-width: 768px) {
            .comparison-slider {
                height: 400px;
            }

            .header h1 {
                font-size: 2rem;
            }

            .slider-button {
                width: 50px;
                height: 50px;
            }

            .slider-button::before {
                border-width: 8px 12px 8px 0;
                left: 10px;
            }

            .slider-button::after {
                border-width: 8px 0 8px 12px;
                right: 10px;
            }

            .label {
                font-size: 0.75rem;
                padding: 8px 15px;
            }
        }

    const slider = document.getElementById('comparisonSlider');
        const afterImage = document.getElementById('afterImage');
        const sliderHandle = document.getElementById('sliderHandle');
        
        let isActive = false;

        function updateSlider(x) {
            const sliderRect = slider.getBoundingClientRect();
            let position = x - sliderRect.left;
            
            // Constrain position within slider bounds
            if (position < 0) position = 0;
            if (position > sliderRect.width) position = sliderRect.width;
            
            const percentage = (position / sliderRect.width) * 100;
            
            // Update after image clip path
            afterImage.style.clipPath = `polygon(0 0, ${percentage}% 0, ${percentage}% 100%, 0 100%)`;
            
            // Update handle position
            sliderHandle.style.left = `${percentage}%`;
        }

        // Mouse events
        slider.addEventListener('mousedown', (e) => {
            isActive = true;
            updateSlider(e.clientX);
        });

        document.addEventListener('mousemove', (e) => {
            if (!isActive) return;
            updateSlider(e.clientX);
        });

        document.addEventListener('mouseup', () => {
            isActive = false;
        });

        // Touch events for mobile
        slider.addEventListener('touchstart', (e) => {
            isActive = true;
            updateSlider(e.touches[0].clientX);
        });

        document.addEventListener('touchmove', (e) => {
            if (!isActive) return;
            updateSlider(e.touches[0].clientX);
        });

        document.addEventListener('touchend', () => {
            isActive = false;
        });

        // Click anywhere on slider
        slider.addEventListener('click', (e) => {
            updateSlider(e.clientX);
        });