Gradient-Fill Value Slider — HTML CSS JS Snippet

<div class="gfs-wrap">
  <div class="gfs-track" id="gfsTrack">
    <div class="gfs-fill" id="gfsFill"></div>
    <div class="gfs-thumb" id="gfsThumb" tabindex="0" role="slider" aria-label="Risk level" aria-valuemin="0" aria-valuemax="100" aria-valuenow="35">
      <div class="gfs-tooltip" id="gfsTooltip">35</div>
    </div>
  </div>
  <div class="gfs-scale"><span>Low risk</span><span>High risk</span></div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f6f7f9;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.gfs-wrap{width:100%;max-width:380px}
.gfs-track{position:relative;height:10px;border-radius:10px;background:#e5e7eb;margin:26px 2px 0}
.gfs-fill{position:absolute;top:0;left:0;height:100%;border-radius:10px;width:35%;background:linear-gradient(90deg,#10b981,#f59e0b,#ef4444)}
.gfs-thumb{position:absolute;top:50%;left:35%;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(15,23,42,.3);transform:translate(-50%,-50%);cursor:grab;touch-action:none;border:3px solid transparent}
.gfs-thumb:active{cursor:grabbing}
.gfs-thumb:focus-visible{outline:2px solid #1f2937;outline-offset:3px}
.gfs-tooltip{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);font:800 11.5px system-ui,sans-serif;color:#fff;padding:4px 9px;border-radius:6px;white-space:nowrap}
.gfs-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:inherit}
.gfs-scale{display:flex;justify-content:space-between;margin-top:10px;font:600 11px system-ui,sans-serif;color:#9ca3af}

var track = document.getElementById('gfsTrack');
var fill = document.getElementById('gfsFill');
var thumb = document.getElementById('gfsThumb');
var tooltip = document.getElementById('gfsTooltip');

var MIN = 0, MAX = 100;
var value = 35;

// Same three-color stop gradient as the fill bar — sampled at the current
// percentage so the tooltip and thumb border always match the fill's color
// exactly at the thumb's position, not just the average or endpoint color.
var STOPS = [
  { pct: 0,   color: [16, 185, 129] },
  { pct: 50,  color: [245, 158, 11] },
  { pct: 100, color: [239, 68, 68] },
];

function lerp(a, b, t) { return Math.round(a + (b - a) * t); }

function colorAt(pct) {
  for (var i = 0; i < STOPS.length - 1; i++) {
    var a = STOPS[i], b = STOPS[i + 1];
    if (pct >= a.pct && pct <= b.pct) {
      var t = (pct - a.pct) / (b.pct - a.pct);
      var c = [lerp(a.color[0], b.color[0], t), lerp(a.color[1], b.color[1], t), lerp(a.color[2], b.color[2], t)];
      return 'rgb(' + c.join(',') + ')';
    }
  }
  return 'rgb(239,68,68)';
}

function render() {
  var pct = ((value - MIN) / (MAX - MIN)) * 100;
  fill.style.width = pct + '%';
  thumb.style.left = pct + '%';
  var color = colorAt(pct);
  thumb.style.borderColor = color;
  tooltip.style.background = color;
  tooltip.textContent = Math.round(value);
  thumb.setAttribute('aria-valuenow', Math.round(value));
}

function valueFromClientX(clientX) {
  var rect = track.getBoundingClientRect();
  var x = Math.max(0, Math.min(rect.width, clientX - rect.left));
  return MIN + (x / rect.width) * (MAX - MIN);
}

var dragging = false;

function onMove(e) {
  if (!dragging) return;
  var clientX = e.touches ? e.touches[0].clientX : e.clientX;
  value = valueFromClientX(clientX);
  render();
}

thumb.addEventListener('pointerdown', function () { dragging = true; });
window.addEventListener('pointermove', onMove);
window.addEventListener('pointerup', function () { dragging = false; });
thumb.addEventListener('touchstart', function () { dragging = true; }, { passive: true });
window.addEventListener('touchmove', onMove, { passive: true });
window.addEventListener('touchend', function () { dragging = false; });

track.addEventListener('pointerdown', function (e) {
  if (e.target === thumb) return;
  value = valueFromClientX(e.clientX);
  render();
});

thumb.addEventListener('keydown', function (e) {
  var step = e.shiftKey ? 10 : 1;
  if (e.key === 'ArrowRight' || e.key === 'ArrowUp') { value = Math.min(MAX, value + step); render(); e.preventDefault(); }
  else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') { value = Math.max(MIN, value - step); render(); e.preventDefault(); }
});

render();