为HTML范围滑块添加动态居中文本提示

<div class="range" data-prefix="音乐:">
  <input type="range" min="0" max="100" value="100">
</div>

<div class="range" data-prefix="音效:">
  <input type="range" min="0" max="100" value="100">
</div>

<div class="range" data-prefix="难度:">
  <input type="range" min="0" max="100" value="50">
</div>

body {
  background: #2b2219;
  font: 16px/1.4 sans-serif;
}

.range {
  position: relative; /* 容器相对定位，为伪元素提供定位上下文 */
  width: 220px; /* 设置滑块容器的宽度 */
  margin-bottom: 20px; /* 增加间距 */
}

.range::after {
  position: absolute; /* 伪元素绝对定位 */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; /* 铺满整个父容器 */
  display: flex; /* 使用Flexbox进行内容居中 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  content: attr(data-prefix) attr(data-value); /* 显示data-prefix和data-value属性的内容 */
  color: #fff; /* 文本颜色 */
  opacity: 0.7; /* 文本透明度 */
  pointer-events: none; /* 阻止伪元素捕获鼠标事件，确保滑块可交互 */
}

/* 隐藏默认的滑块外观 */
input[type=range] {
  appearance: none; /* 移除浏览器默认样式 */
  -webkit-appearance: none; /* 针对WebKit浏览器 */
  width: inherit; /* 继承父容器宽度 */
  cursor: pointer; /* 鼠标悬停显示手型光标 */
  margin: 0; /* 移除默认外边距 */
}

input[type=range]:focus {
  outline: none; /* 移除焦点时的外边框 */
}

/* 自定义滑块轨道样式 */
input[type=range]::-webkit-slider-runnable-track {
  height: 2rem; /* 轨道高度 */
  box-shadow: 0 0 0 2px #000, inset 0 0 0 1px #fff1; /* 轨道阴影 */
  background: #2b2b2b; /* 轨道背景色 */
}

/* 自定义滑块手柄样式 */
input[type=range]::-webkit-slider-thumb {
  appearance: none; /* 移除浏览器默认样式 */
  -webkit-appearance: none; /* 针对WebKit浏览器 */
  box-shadow: 0 0 0 2px #000, inset 0 0 0 1px #fff2; /* 手柄阴影 */
  height: 100%; /* 手柄高度与轨道相同 */
  width: 1rem; /* 手柄宽度 */
  border-radius: 3px; /* 手柄圆角 */
  background: #6d6e70; /* 手柄背景色 */
  cursor: pointer; /* 鼠标悬停显示手型光标 */
  border-radius: 0; /* 覆盖之前的圆角，设置为直角 */
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #313131; /* 焦点时轨道背景色 */
}

/**
 * 更新指定滑块容器的data-value属性
 * @param {HTMLElement} elRange - 包含滑块的父div元素 (.range)
 */
const updateRangeTooltip = (elRange) => {
  // 获取滑块的当前值，并添加百分号（根据需求可调整）
  elRange.dataset.value = `${elRange.querySelector("input[type=range]").value}%`;
};

/**
 * 初始化单个滑块，添加事件监听器并设置初始提示
 * @param {HTMLElement} elRange - 包含滑块的父div元素 (.range)
 */
const initializeRange = (elRange) => {
  // 监听滑块的input事件，实时更新提示
  elRange.addEventListener("input", () => updateRangeTooltip(elRange));
  // 页面加载时设置初始提示
  updateRangeTooltip(elRange);
};

// 遍历页面中所有具有"range"类的元素，并进行初始化
document.querySelectorAll(".range").forEach(initializeRange);