Glass Jelly Slider

admin1234
Feb 07, 2026 68
Live Preview

Live Editor

<div class="slider-container">
        <div class="slider-track">
            <div class="slider-fill"></div>
            <div class="slider-thumb">
                <div class="jelly-shadow"></div>
                <div class="jelly-fold">
                    <div class="fold-shape"></div>
                    <div class="fold-highlight"></div>
                </div>
                <div class="jelly-blob">
                    <div class="glass-edge"></div>
                    <div class="glass-refraction"></div>
                </div>
            </div>
            <div class="value-display">37%</div>
        </div>
    </div>
  * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #e8e8e8 0%, #f5f5f5 50%, #e0e0e0 100%);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .slider-container {
            position: relative;
            width: 300px;
            height: 150px;
            display: flex;
            align-items: center;
            perspective: 1000px;
        }

        .slider-track {
            position: relative;
            width: 100%;
            height: 55px;
            background: linear-gradient(to bottom,
                rgba(255, 255, 255, 0.4) 0%,
                rgba(230, 230, 230, 0.3) 50%,
                rgba(255, 255, 255, 0.35) 100%);
            border-radius: 30px;
            overflow: visible;
            backdrop-filter: blur(10px);
            box-shadow: 
                inset 0 3px 10px rgba(0, 0, 0, 0.1),
                inset 0 -2px 8px rgba(255, 255, 255, 0.6),
                0 5px 20px rgba(0, 0, 0, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.5);
        }

        .slider-fill {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            background: linear-gradient(to right,
                rgba(255, 180, 120, 0.6) 0%,
                rgba(255, 140, 90, 0.65) 100%);
            border-radius: 30px;
            transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: inset 0 2px 8px rgba(255, 100, 50, 0.3);
        }

        .slider-thumb {
            position: absolute;
            top: 50%;
            width: 100px;
            height: 100px;
            cursor: grab;
            transform: translate(-50%, -50%);
            z-index: 10;
            transition: filter 0.2s ease;
        }

        .slider-thumb:active {
            cursor: grabbing;
        }

        /* Glass jelly blob with fold effect */
        .jelly-blob {
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg,
                rgba(255, 250, 245, 0.95) 0%,
                rgba(255, 235, 215, 0.92) 15%,
                rgba(255, 210, 180, 0.88) 40%,
                rgba(255, 180, 140, 0.9) 70%,
                rgba(240, 150, 110, 0.92) 100%);
            border-radius: 50%;
            box-shadow: 
                0 8px 32px rgba(240, 140, 100, 0.35),
                0 2px 8px rgba(0, 0, 0, 0.1),
                inset 0 -10px 20px rgba(220, 120, 80, 0.25),
                inset 0 10px 25px rgba(255, 255, 255, 0.5),
                inset -5px -5px 15px rgba(200, 100, 60, 0.2);
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255, 255, 255, 0.6);
        }

        /* Main glossy glass highlight */
        .jelly-blob::before {
            content: '';
            position: absolute;
            top: 15%;
            left: 20%;
            width: 45%;
            height: 40%;
            background: radial-gradient(ellipse at 30% 30%,
                rgba(255, 255, 255, 0.85) 0%,
                rgba(255, 255, 255, 0.5) 30%,
                rgba(255, 255, 255, 0.2) 50%,
                transparent 70%);
            border-radius: 50%;
            filter: blur(3px);
            transform: rotate(-25deg);
        }

        /* Secondary glass reflection */
        .jelly-blob::after {
            content: '';
            position: absolute;
            bottom: 18%;
            right: 22%;
            width: 30%;
            height: 25%;
            background: radial-gradient(ellipse at center,
                rgba(255, 255, 255, 0.4) 0%,
                rgba(255, 255, 255, 0.15) 40%,
                transparent 65%);
            border-radius: 50%;
            filter: blur(5px);
        }

        /* Glass edge highlight */
        .glass-edge {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.6) 0%,
                transparent 50%,
                rgba(0, 0, 0, 0.05) 100%);
            pointer-events: none;
        }

        /* Fold/Stretch connecting piece */
        .jelly-fold {
            position: absolute;
            left: -20px;
            top: 50%;
            width: 40px;
            height: 60px;
            transform: translateY(-50%);
            overflow: visible;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .slider-thumb.dragging .jelly-fold,
        .slider-thumb.moving-left .jelly-fold {
            opacity: 1;
        }

        /* SVG-like fold effect using clip-path and gradients */
        .fold-shape {
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right,
                rgba(255, 140, 90, 0.4) 0%,
                rgba(255, 180, 140, 0.6) 30%,
                rgba(255, 210, 180, 0.75) 60%,
                rgba(255, 235, 215, 0.85) 100%);
            clip-path: polygon(0% 30%, 100% 20%, 100% 80%, 0% 70%);
            filter: blur(1px);
            box-shadow: 
                inset 0 2px 8px rgba(255, 255, 255, 0.5),
                inset 0 -2px 8px rgba(200, 100, 60, 0.3);
        }

        .fold-highlight {
            position: absolute;
            top: 20%;
            left: 0;
            width: 100%;
            height: 60%;
            background: linear-gradient(to right,
                transparent 0%,
                rgba(255, 255, 255, 0.4) 50%,
                rgba(255, 255, 255, 0.6) 100%);
            clip-path: polygon(0% 35%, 100% 25%, 100% 75%, 0% 65%);
            filter: blur(2px);
        }

        /* Soft shadow beneath */
        .jelly-shadow {
            position: absolute;
            bottom: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 75%;
            height: 25px;
            background: radial-gradient(ellipse at center,
                rgba(0, 0, 0, 0.25) 0%,
                rgba(0, 0, 0, 0.1) 50%,
                transparent 75%);
            border-radius: 50%;
            filter: blur(8px);
            transition: all 0.3s ease;
        }

        .value-display {
            position: absolute;
            top: 50%;
            right: 30px;
            transform: translateY(-50%);
            font-size: 28px;
            font-weight: 600;
            color: rgba(120, 120, 120, 0.45);
            pointer-events: none;
            user-select: none;
            text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
            letter-spacing: -0.5px;
        }

        /* Dragging state - extreme glass jelly deformation */
        .slider-thumb.dragging .jelly-blob {
            animation: glass-jelly-squish 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
            box-shadow: 
                0 12px 40px rgba(240, 140, 100, 0.45),
                0 4px 12px rgba(0, 0, 0, 0.15),
                inset 0 -10px 20px rgba(220, 120, 80, 0.3),
                inset 0 10px 30px rgba(255, 255, 255, 0.6),
                inset -5px -5px 18px rgba(200, 100, 60, 0.25);
        }

        .slider-thumb.dragging .jelly-shadow {
            width: 80%;
            opacity: 0.9;
            filter: blur(10px);
        }

        .slider-thumb.dragging .jelly-fold {
            animation: fold-stretch 0.6s ease-in-out infinite;
        }

        /* Release bounce effect */
        .slider-thumb.bouncing .jelly-blob {
            animation: glass-jelly-bounce 1s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .slider-thumb.bouncing .jelly-fold {
            animation: fold-settle 0.5s ease-out;
        }

        @keyframes glass-jelly-squish {
            0% {
                border-radius: 50%;
                transform: scale(1) rotate(0deg);
            }
            25% {
                border-radius: 45% 55% 47% 53% / 53% 47% 53% 47%;
                transform: scale(1.08, 0.92) rotate(-2deg);
            }
            50% {
                border-radius: 53% 47% 56% 44% / 47% 53% 47% 53%;
                transform: scale(0.92, 1.08) rotate(2deg);
            }
            75% {
                border-radius: 47% 53% 44% 56% / 56% 44% 56% 44%;
                transform: scale(1.04, 0.96) rotate(-1deg);
            }
            100% {
                border-radius: 50%;
                transform: scale(1) rotate(0deg);
            }
        }

        @keyframes glass-jelly-bounce {
            0% {
                transform: scale(1) rotate(0deg);
                border-radius: 50%;
            }
            12% {
                transform: scale(1.2, 0.8) rotate(-3deg);
                border-radius: 42% 58% 48% 52% / 48% 52% 38% 62%;
            }
            25% {
                transform: scale(0.85, 1.15) rotate(2deg);
                border-radius: 52% 48% 42% 58% / 58% 42% 52% 48%;
            }
            38% {
                transform: scale(1.1, 0.9) rotate(-1deg);
                border-radius: 46% 54% 54% 46% / 48% 52% 46% 54%;
            }
            50% {
                transform: scale(0.95, 1.05) rotate(1deg);
                border-radius: 52% 48% 46% 54% / 54% 46% 52% 48%;
            }
            65% {
                transform: scale(1.03, 0.97) rotate(-0.5deg);
                border-radius: 49% 51% 52% 48% / 48% 52% 49% 51%;
            }
            80% {
                transform: scale(0.99, 1.01) rotate(0.3deg);
                border-radius: 51% 49% 48% 52% / 52% 48% 51% 49%;
            }
            100% {
                transform: scale(1) rotate(0deg);
                border-radius: 50%;
            }
        }

        @keyframes fold-stretch {
            0%, 100% {
                transform: translateY(-50%) scaleX(1) scaleY(1);
                opacity: 0.8;
            }
            50% {
                transform: translateY(-50%) scaleX(1.3) scaleY(0.9);
                opacity: 1;
            }
        }

        @keyframes fold-settle {
            0% {
                opacity: 1;
                transform: translateY(-50%) scaleX(1.2);
            }
            100% {
                opacity: 0;
                transform: translateY(-50%) scaleX(0.8);
            }
        }

        /* Hover effect - glass glow */
        .slider-thumb:hover .jelly-blob {
            transform: scale(1.06);
            box-shadow: 
                0 10px 35px rgba(240, 140, 100, 0.4),
                0 3px 10px rgba(0, 0, 0, 0.12),
                inset 0 -10px 20px rgba(220, 120, 80, 0.28),
                inset 0 10px 30px rgba(255, 255, 255, 0.55),
                inset -5px -5px 18px rgba(200, 100, 60, 0.22);
        }

        .slider-thumb:hover .jelly-shadow {
            width: 80%;
        }

        /* Smooth movement */
        .slider-thumb.moving {
            transition: left 0.15s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .slider-thumb.moving .jelly-blob {
            animation: glass-wobble-subtle 0.4s ease-out;
        }

        .slider-thumb.moving-left .jelly-fold {
            transform: translateY(-50%) scaleX(-1);
            left: auto;
            right: -20px;
        }

        @keyframes glass-wobble-subtle {
            0% {
                border-radius: 50%;
            }
            25% {
                border-radius: 48% 52% 51% 49% / 51% 49% 48% 52%;
            }
            50% {
                border-radius: 52% 48% 49% 51% / 49% 51% 52% 48%;
            }
            75% {
                border-radius: 49% 51% 52% 48% / 52% 48% 49% 51%;
            }
            100% {
                border-radius: 50%;
            }
        }

        /* Additional glass refraction effect */
        .glass-refraction {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: linear-gradient(225deg,
                transparent 0%,
                rgba(255, 255, 255, 0.1) 40%,
                transparent 60%,
                rgba(0, 0, 0, 0.03) 100%);
            pointer-events: none;
        }
 class GlassJellySlider {
            constructor(container) {
                this.container = container;
                this.track = container.querySelector('.slider-track');
                this.thumb = container.querySelector('.slider-thumb');
                this.fill = container.querySelector('.slider-fill');
                this.valueDisplay = container.querySelector('.value-display');
                
                this.isDragging = false;
                this.value = 37;
                this.lastPosition = 0;
                this.direction = 'right';
                
                this.init();
            }

            init() {
                this.updateSlider(this.value);
                
                // Mouse events
                this.thumb.addEventListener('mousedown', this.startDrag.bind(this));
                document.addEventListener('mousemove', this.drag.bind(this));
                document.addEventListener('mouseup', this.endDrag.bind(this));
                
                // Touch events
                this.thumb.addEventListener('touchstart', this.startDrag.bind(this), { passive: false });
                document.addEventListener('touchmove', this.drag.bind(this), { passive: false });
                document.addEventListener('touchend', this.endDrag.bind(this));
                
                // Click on track
                this.track.addEventListener('click', this.clickTrack.bind(this));
            }

            startDrag(e) {
                this.isDragging = true;
                this.thumb.classList.add('dragging');
                this.thumb.classList.remove('bouncing', 'moving', 'moving-left');
                e.preventDefault();
            }

            drag(e) {
                if (!this.isDragging) return;

                const clientX = e.type.includes('touch') ? e.touches[0].clientX : e.clientX;
                
                // Detect direction
                const currentLeft = parseFloat(this.thumb.style.left) || 0;
                if (clientX < this.lastPosition) {
                    this.direction = 'left';
                    this.thumb.classList.add('moving-left');
                } else if (clientX > this.lastPosition) {
                    this.direction = 'right';
                    this.thumb.classList.remove('moving-left');
                }
                this.lastPosition = clientX;
                
                this.updateFromPosition(clientX);
            }

            endDrag() {
                if (!this.isDragging) return;
                
                this.isDragging = false;
                this.thumb.classList.remove('dragging', 'moving-left');
                this.thumb.classList.add('bouncing');
                
                // Remove bouncing class after animation
                setTimeout(() => {
                    this.thumb.classList.remove('bouncing');
                }, 1000);
            }

            clickTrack(e) {
                if (e.target === this.thumb || this.thumb.contains(e.target)) return;
                
                const currentLeft = parseFloat(this.thumb.style.left) || 0;
                const clickX = e.clientX;
                
                if (clickX < currentLeft) {
                    this.thumb.classList.add('moving-left');
                } else {
                    this.thumb.classList.remove('moving-left');
                }
                
                this.thumb.classList.add('moving');
                this.updateFromPosition(e.clientX);
                
                setTimeout(() => {
                    this.thumb.classList.remove('moving', 'moving-left');
                    this.thumb.classList.add('bouncing');
                    
                    setTimeout(() => {
                        this.thumb.classList.remove('bouncing');
                    }, 1000);
                }, 150);
            }

            updateFromPosition(clientX) {
                const trackRect = this.track.getBoundingClientRect();
                const thumbWidth = this.thumb.offsetWidth;
                
                let position = clientX - trackRect.left;
                position = Math.max(thumbWidth / 2, Math.min(position, trackRect.width - thumbWidth / 2));
                
                const percentage = ((position - thumbWidth / 2) / (trackRect.width - thumbWidth)) * 100;
                this.value = Math.round(Math.max(0, Math.min(100, percentage)));
                
                this.updateSlider(this.value);
            }

            updateSlider(value) {
                const trackRect = this.track.getBoundingClientRect();
                const thumbWidth = this.thumb.offsetWidth;
                const maxTravel = trackRect.width - thumbWidth;
                
                const position = (value / 100) * maxTravel + thumbWidth / 2;
                
                this.thumb.style.left = position + 'px';
                this.fill.style.width = position + 'px';
                this.valueDisplay.textContent = value + '%';
            }
        }

        // Initialize slider
        const slider = new GlassJellySlider(document.querySelector('.slider-container'));
Categories

Glass Jelly Slider

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
