如何在HTML范围滑块（Input Slider）中心动态显示值

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

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

body {
  background: #2b2219;
  font: 16px/1.4 sans-serif;
  display: flex; /* 仅为演示目的，用于居中滑块 */
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

/* 容器样式，用于定位伪元素 */
.range {
  position: relative; /* 伪元素的定位基准 */
  width: 280px; /* 根据需要调整滑块宽度 */
  height: 2rem; /* 确保有足够高度容纳伪元素和滑块 */
  display: flex;
  align-items: center;
}

/* 伪元素样式，用于显示值 */
.range::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  content: attr(data-prefix) attr(data-value); /* 显示前缀和动态值 */
  color: #fff;
  opacity: 0.7;
  pointer-events: none; /* 阻止伪元素捕获鼠标事件，确保滑块可操作 */
  font-size: 1rem;
}

/* 范围滑块的基础样式重置 */
input[type=range] {
  appearance: none; /* 移除默认样式 */
  width: inherit; /* 继承父容器宽度 */
  height: 2rem; /* 与容器高度一致 */
  cursor: pointer;
  background: transparent; /* 使滑块背景透明，以便伪元素可见 */
}

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

/* 自定义滑轨样式 */
input[type=range]::-webkit-slider-runnable-track {
  height: 100%; /* 填充父容器高度 */
  box-shadow: 0 0 0 2px #000, inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  background: #2b2b2b;
  border-radius: 3px;
}

/* 自定义滑块（拖动把手）样式 */
input[type=range]::-webkit-slider-thumb {
  appearance: none;
  box-shadow: 0 0 0 2px #000, inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  height: 100%;
  width: 1rem;
  border-radius: 3px;
  background: #6d6e70;
  cursor: grab;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #313131; /* 焦点时滑轨颜色变化 */
}