Range Slider — レンジスライダー（単一・デュアル）

/* === レンジスライダー ===
   色を変えたいときは :root の変数を書き換えるだけでOKです */
:root {
  --color-primary:      #2B7FE8; /* つまみ・強調色 */
  --color-track:        #D0D7E0; /* トラック背景色 */
  --color-thumb-shadow: rgba(43, 127, 232, 0.25); /* つまみのフォーカスリング */
}

*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: sans-serif;
  padding: 24px;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.range-wrapper { width: 100%; }

.range-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.range-label {
  font-size: 14px;
  font-weight: 600;
  color: #1E2A3A;
}

/* ドラッグ中にリアルタイム更新される現在値 */
.range-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
}

/* ブラウザデフォルトのスライダーUIをリセット */
.range-input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--color-track);
  outline: none;
  cursor: pointer;
}

/* Chrome / Safari のつまみ */
.range-input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: grab;
  box-shadow: 0 0 0 3px var(--color-thumb-shadow);
  transition: box-shadow 0.15s;
}

.range-input::-webkit-slider-thumb:active {
  cursor: grabbing;
  box-shadow: 0 0 0 5px var(--color-thumb-shadow);
}

/* Firefox のつまみ（border: none がないとデフォルト枠が残る） */
.range-input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: grab;
  box-shadow: 0 0 0 3px var(--color-thumb-shadow);
}

/* === デュアルレンジ === */

/* 2つのスライダーを重ねるコンテナ */
.dual-range-track {
  position: relative;
  height: 24px;
}

/* 2つの透明inputの背後にトラックを描く */
.dual-range-track::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 6px;
  transform: translateY(-50%);
  background: var(--color-track);
  border-radius: 3px;
  pointer-events: none;
}

/* 2つのスライダーを同じ位置に重ねる */
.range-input--dual {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent; /* トラックは親コンテナのスタイルに任せる */
  pointer-events: none;    /* トラック全体のクリックを無効化 */
}

.range-input--min { z-index: 1; }
.range-input--max { z-index: 2; }

/* つまみだけクリックできるようにする */
.range-input--dual::-webkit-slider-thumb { pointer-events: all; }
.range-input--dual::-moz-range-thumb     { pointer-events: all; }

/* === 決定ボタン・結果エリア === */

.range-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.range-confirm-btn {
  padding: 8px 20px;
  font-size: 14px;
  font-family: sans-serif;
  color: #fff;
  background: var(--color-primary);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}

.range-confirm-btn:hover { background: #1a6fd4; }

/* hidden 属性が外れると表示される */
.range-result {
  margin-top: 12px;
  padding: 10px 14px;
  background: #F4F6F9;
  border-radius: 6px;
  font-size: 14px;
  color: #1E2A3A;
}

@media (max-width: 480px) {
  body { padding: 16px; }
}

// ===== Pattern 1: 単一レンジ =====
var volumeRange      = document.getElementById('volumeRange');
var volumeValueEl    = document.getElementById('volumeValue');
var volumeConfirmBtn = document.getElementById('volumeConfirmBtn');
var volumeResult     = document.getElementById('volumeResult');

// ドラッグ中に現在値をリアルタイム表示
volumeRange.addEventListener('input', function () {
  volumeValueEl.textContent = volumeRange.value;
});

// 決定ボタン: その時点の値を結果エリアに表示する
volumeConfirmBtn.addEventListener('click', function () {
  volumeResult.textContent = '音量: ' + volumeRange.value;
  volumeResult.hidden = false;
});

// ===== Pattern 2: デュアルレンジ =====
var priceMin        = document.getElementById('priceMin');
var priceMax        = document.getElementById('priceMax');
var priceValueEl    = document.getElementById('priceValue');
var priceConfirmBtn = document.getElementById('priceConfirmBtn');
var priceResult     = document.getElementById('priceResult');
var STEP = 1000;

// 数値を「¥10,000」形式にフォーマットする
function formatPrice(val) {
  return '¥' + parseInt(val, 10).toLocaleString('ja-JP');
}

function updateDualRange() {
  var minVal = parseInt(priceMin.value, 10);
  var maxVal = parseInt(priceMax.value, 10);

  // 下限が上限を超えないよう制約する
  if (minVal >= maxVal) {
    priceMin.value = maxVal - STEP;
    minVal = maxVal - STEP;
  }

  // 下限が最大値付近のとき、下限側のz-indexを上げて操作できるようにする
  priceMin.style.zIndex = minVal > 90000 ? '3' : '1';

  // 価格表示を更新
  priceValueEl.textContent = formatPrice(priceMin.value) + ' 〜 ' + formatPrice(priceMax.value);
}

priceMin.addEventListener('input', updateDualRange);
priceMax.addEventListener('input', updateDualRange);

// 決定ボタン: その時点の範囲を結果エリアに表示する
priceConfirmBtn.addEventListener('click', function () {
  priceResult.textContent = '価格帯: ' + formatPrice(priceMin.value) + ' 〜 ' + formatPrice(priceMax.value);
  priceResult.hidden = false;
});