Javascript 如何将值添加到输入滑块(范围滑块)的中心

const rangeTooltip = (elRange) => {
  elRange.dataset.value = `${elRange.querySelector("[type=range]").value}%`;
};

const range = (elRange) => {
  elRange.addEventListener("input", () => rangeTooltip(elRange));
  rangeTooltip(elRange);
};

document.querySelectorAll(".range").forEach(range);

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

.range {
  position: relative;
  width: 220px;
}

.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; /* prevent pointer interaction */
}

input[type=range] {
  appearance: none;
  width: inherit;
  cursor: pointer;
}

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;
  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;
}

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

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

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