Animated Jelly Slider – CSS & JavaScript Range Slider

72 0 Inputs & Toggles CodeExpert Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Animated Jelly Slider – CSS & JavaScript Range Slider

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: radial-gradient(circle at 30% 20%, #2a2050, #120d24 70%);
  color: #fff;
}
.stage { width: min(520px, 92vw); display: flex; flex-direction: column; gap: 46px; }
h1 { font-size: 2.2rem; text-align: center; letter-spacing: 1px; }
.hint { text-align: center; opacity: .65; margin-top: -32px; }

.jelly {
  --c: #ff4d8d;
  --p: 0.4;
  position: relative;
  height: 56px;
  touch-action: none;
  cursor: pointer;
  user-select: none;
}
.track {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 14px; transform: translateY(-50%);
  border-radius: 99px;
  background: rgba(255,255,255,.1);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.45);
  overflow: hidden;
}
.fill {
  height: 100%;
  width: calc(var(--p) * 100%);
  border-radius: 99px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 55%, #fff), var(--c));
  box-shadow: 0 0 18px var(--c);
}
.thumb {
  position: absolute; top: 50%;
  left: calc(var(--p) * 100%);
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.9) 0 8%, transparent 9%),
              radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--c) 40%, #fff), var(--c) 70%);
  box-shadow: 0 10px 22px rgba(0,0,0,.35), inset 0 -6px 12px rgba(0,0,0,.25);
  display: grid; place-items: center;
  will-change: transform;
}
.val { font-weight: 800; font-size: .95rem; text-shadow: 0 1px 2px rgba(0,0,0,.4); }

// Jelly Slider — spring physics squash & stretch
document.querySelectorAll('.jelly').forEach(function (el) {
  var min = +el.dataset.min, max = +el.dataset.max;
  var value = +el.dataset.value;
  var thumb = el.querySelector('.thumb');
  var label = el.querySelector('.val');
  el.style.setProperty('--c', el.dataset.color);

var pos = (value - min) / (max - min); // rendered position 0..1
  var target = pos, vel = 0;            // spring state
  var sx = 1, sy = 1, svx = 0, svy = 0; // scale springs
  var dragging = false;

function tick() {
    // position spring
    var f = (target - pos) * 0.18;
    vel = (vel + f) * 0.72;
    pos += vel;
    // stretch along movement direction, squash perpendicular
    var speed = Math.min(Math.abs(vel) * 40, 0.6);
    var tx = 1 + speed, ty = 1 - speed * 0.6;
    svx = (svx + (tx - sx) * 0.25) * 0.78; sx += svx;
    svy = (svy + (ty - sy) * 0.25) * 0.78; sy += svy;
    var tilt = Math.max(-25, Math.min(25, vel * 900));

el.style.setProperty('--p', pos);
    thumb.style.transform = 'rotate(' + tilt + 'deg) scale(' + sx.toFixed(3) + ',' + sy.toFixed(3) + ')';
    var v = Math.round(min + (max - min) * Math.min(1, Math.max(0, pos)));
    if (label.textContent != v) label.textContent = v;
    requestAnimationFrame(tick);
  }
  tick();
});

Comments 0

…

Animated Jelly Slider – CSS & JavaScript Range Slider

Recommended

Comments 0