伸びるスライダー

あなたは熟練のフロントエンドエンジニアです。私のWebサイトに「伸びるスライダー」の効果を追加してください。

# 追加してほしい効果
伸びるスライダー（遊べるUI）
ドラッグするとノブが動かした方向へ弾性で伸び、現在値のバブルが追従表示されるスライダー。指を離すとぷるんと弾んで元の形に戻ります。

# 追加する場所
👉【ここに対象箇所を記入：例「トップのヒーローセクション」「お問い合わせボタン」「記事カードの一覧」など】

# 参考実装（この見た目・挙動を再現してください）
【HTML】
<!-- 伸びるスライダー: ドラッグでノブが進行方向に弾性で伸び、値のバブルが追従し、離すと弾んで戻る -->
<div class="stage">
  <div class="elastic-slider">
    <span class="elastic-slider__bubble" aria-hidden="true">50</span>
    <input class="elastic-slider__input" type="range" min="0" max="100" value="50" step="1" aria-label="音量">
  </div>
  <p class="hint">ドラッグすると弾性で伸び、離すと弾んで戻ります</p>
</div>

【CSS】
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: radial-gradient(circle at 50% 30%, #23142a 0%, #0d0e1a 72%);
  color: #f4f5fb;
}

.stage { display: grid; place-items: center; gap: 18px; padding: 20px; }

.elastic-slider {
  position: relative;
  width: min(80vw, 300px);
  padding-top: 34px;
}

/* 値バブル。左位置はJSがノブの実座標から算出する */
.elastic-slider__bubble {
  position: absolute;
  top: 0;
  left: 11px;
  transform: translate(-50%, 6px) scale(.5);
  opacity: 0;
  padding: 4px 10px;
  border-radius: 8px;
  background: #c026d3;
  color: #fff;
  font: 700 12px/1 "Segoe UI", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .25s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.elastic-slider__bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #c026d3;
}
.elastic-slider.is-active .elastic-slider__bubble {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.elastic-slider__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 34px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.elastic-slider__input:focus-visible { outline: 2px solid #e879f9; outline-offset: 4px; border-radius: 8px; }

.elastic-slider__input::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e879f9, #a855f7);
}
.elastic-slider__input::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e879f9, #a855f7);
}

/* ノブ: --stretch/--tx はJSがポインタ移動量から算出する。離す瞬間だけ弾性トランジションを有効にする */
.elastic-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -7px;
  border-radius: 50%;
  border: none;
  background: radial-gradient(circle at 32% 28%, #fdf4ff, #e879f9 60%, #c026d3 100%);
  box-shadow: 0 6px 16px rgba(192, 38, 212, .5);
  transform: scaleX(var(--stretch, 1)) translateX(var(--tx, 0px));
  transition: transform .08s linear;
  animation: thumb-idle 2.6s ease-in-out infinite;
}
.elastic-slider__input::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fdf4ff, #e879f9 60%, #c026d3 100%);
  box-shadow: 0 6px 16px rgba(192, 38, 212, .5);
  transform: scaleX(var(--stretch, 1)) translateX(var(--tx, 0px));
  transition: transform .08s linear;
  animation: thumb-idle 2.6s ease-in-out infinite;
}
.elastic-slider__input.is-releasing::-webkit-slider-thumb {
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1);
}
.elastic-slider__input.is-releasing::-moz-range-thumb {
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes thumb-idle {
  0%, 100% { box-shadow: 0 6px 16px rgba(192, 38, 212, .5); }
  50%      { box-shadow: 0 6px 22px rgba(232, 121, 249, .72); }
}

.hint { margin: 0; font-size: 13px; color: rgba(244, 245, 251, .5); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .elastic-slider__input::-webkit-slider-thumb { animation: none; }
  .elastic-slider__input::-moz-range-thumb { animation: none; }
  .elastic-slider__bubble { transition-duration: .1s; }
}

【JavaScript】
// 伸びるスライダー: ドラッグの動きに合わせてノブが弾性で伸び、離すと弾んで戻る
(() => {
  const wrap = document.querySelector('.elastic-slider');
  const input = document.querySelector('.elastic-slider__input');
  const bubble = document.querySelector('.elastic-slider__bubble');
  if (!wrap || !input || !bubble) return; // null安全

  const THUMB = 22;
  let lastX = 0;
  let hideTimer = null;

  const thumbLeft = () => {
    const min = parseFloat(input.min) || 0;
    const max = parseFloat(input.max) || 100;
    const val = parseFloat(input.value) || 0;
    const pct = max > min ? (val - min) / (max - min) : 0;
    const trackW = input.clientWidth || 0;
    return THUMB / 2 + pct * Math.max(0, trackW - THUMB);
  };

  const updateBubble = () => {
    bubble.textContent = input.value;
    bubble.style.left = `${thumbLeft()}px`;
  };

  const showBubble = () => {
    window.clearTimeout(hideTimer);
    wrap.classList.add('is-active');
    updateBubble();
  };
  const scheduleHide = () => {
    window.clearTimeout(hideTimer);
    hideTimer = window.setTimeout(() => wrap.classList.remove('is-active'), 500);
  };

  const resetStretch = () => {
    input.style.setProperty('--stretch', '1');
    input.style.setProperty('--tx', '0px');
  };

  input.addEventListener('pointerdown', (e) => {
    lastX = e.clientX;
    input.classList.remove('is-releasing');
    showBubble();
    try { input.setPointerCapture(e.pointerId); } catch (err) { /* 非対応環境は無視 */ }
  });

  input.addEventListener('pointermove', (e) => {
    if (e.buttons === 0) return; // ドラッグ中のみ伸縮させる
    const dx = e.clientX - lastX;
    lastX = e.clientX;
    const stretch = Math.max(.72, Math.min(1.5, 1 + Math.abs(dx) * .06));
    const shift = Math.max(-9, Math.min(9, dx * .5));
    input.style.setProperty('--stretch', stretch.toFixed(3));
    input.style.setProperty('--tx', `${shift.toFixed(2)}px`);
    updateBubble();
  });

  const release = () => {
    input.classList.add('is-releasing');
    resetStretch();
    scheduleHide();
  };
  input.addEventListener('pointerup', release);
  input.addEventListener('pointercancel', release);

  input.addEventListener('input', updateBubble);
  input.addEventListener('focus', showBubble);
  input.addEventListener('blur', () => { resetStretch(); scheduleHide(); });

  updateBubble();
  window.addEventListener('resize', updateBubble);
})();

# 外部ライブラリ
なし（追加ライブラリ不要）

# 守ってほしいこと
- 既存のHTML構造・レイアウト・デザインを壊さないこと。必要に応じてクラス名・色・サイズを私のサイトに合わせて調整してよい。
- クラス名やidが既存と衝突しないよう、必要なら接頭辞で名前空間を分けること。
- レスポンシブ対応と prefers-reduced-motion への配慮を入れること。
- 私のサイトのフレームワーク（React / Vue / 素のHTML など）に合わせて実装すること。不明な場合は素のHTML/CSS/JSで提示し、組み込み手順も説明すること。
- 変更後の確認手順も簡潔に教えてください。