Javascript 如何将范围滑块中的数据标签在最小值和最大值之间对齐

这是非常具体和随机的，我发现答案不太适合这个特定的用例。为简洁起见，这里有一个指向CodePen演示的链接：

正如您可能一眼就能看到的，我有四个数据标签，它们在移动范围滑块时没有与范围滑块对齐。最小值和最大值都很好，只是中间值有问题

这是基于一个只有最小/最大值的示例，我正在尝试调整它。我已经尝试在

data min label id

和

data max label id

之间添加额外的数据属性，尽管效果不是很好

像往常一样，我可能遗漏了一些明显的东西。非常感谢您的帮助或指点

<div id="wrapper">
  <div id="sliderContainer">

    <div class="tick-slider">

      <div class="tick-slider-header">
        <span><label for="weightSlider">Slider</label></span>
      </div>
      
      <div class="tick-slider-background"></div>
      <div id="weightProgress" class="tick-slider-progress"></div>
      <div id="weightTicks" class="tick-slider-tick-container"></div>
      <input
             id="weightSlider"
             class="tick-slider-input"
             type="range"
             min="0"
             max="5000"
             step="1000"
             value="1000"
             data-tick-step="1000"
             data-tick-id="weightTicks"
             data-value-id="weightValue"
             data-progress-id="weightProgress"
             data-handle-size="18"
             data-min-label-id="weightLabelMin"
             data-max-label-id="weightLabelMax"
             />

      <div class="tick-slider-value-container">
        <div id="weightLabelMin" class="tick-slider-label">0</div>

        <!-- I want to align these 4 items -->
        <div id="weightLabelA" class="tick-slider-label">1000</div>
        <div id="weightLabelB" class="tick-slider-label">2000</div>
        <div id="weightLabelC" class="tick-slider-label">3000</div>
        <div id="weightLabelD" class="tick-slider-label">4000</div> 

        <div id="weightLabelMax" class="tick-slider-label">5000</div>
        <div id="weightValue" class="tick-slider-value"></div>
      </div>
    </div>
  </div>

滑块
0
1000
2000
3000
4000
5000

函数init（）{
常量滑块=document.getElementsByClassName（“勾选滑块输入”）；
用于（让滑块中的滑块）{
slider.oninput=onSliderInput；
更新值（滑块）；
updateValuePosition（滑块）；
更新标签（滑块）；
updateProgress（滑块）；
设置刻度（滑块）；
}
}
函数onSliderInput（事件）{
updateValue（event.target）；
updateValuePosition（event.target）；
updateLabel（event.target）；
updateProgress（event.target）；
}
函数updateValue（滑块）{
让value=document.getElementById（slider.dataset.valueId）；
value.innerHTML=“”+slider.value+”；
}
函数updateValuePosition（滑块）{
让value=document.getElementById（slider.dataset.valueId）；
常量百分比=getSliderPercent（滑块）；
const sliderWidth=slider.getBoundingClientRect（）.width；
const valueWidth=value.getBoundingClientRect（）.width；
const handleSize=slider.dataset.handleSize；
left=百分比*（滑块宽度-把手尺寸）+把手尺寸/2-值宽度/2；
left=Math.min（左，滑块宽度-值宽度）；
left=slider.value==slider.min？0:左；
value.style.left=left+“px”；
}
函数更新标签（滑块）{
常量值=document.getElementById（slider.dataset.valueId）；
const minLabel=document.getElementById（slider.dataset.minLabelId）；
常量maxLabel=document.getElementById（slider.dataset.maxLabelId）；
const valueRect=value.getBoundingClientRect（）；
const minLabelRect=minLabel.getBoundingClientRect（）；
const maxLabelRect=maxLabel.getBoundingClientRect（）；
const minLabelDelta=valueRect.left-（minLabelRect.left）；
常量maxLabelDelta=maxLabelRect.left-valueRect.left；
常数deltaThreshold=32；
if（minLabelDelta

function init() {
    const sliders = document.getElementsByClassName("tick-slider-input");

    for (let slider of sliders) {
        slider.oninput = onSliderInput;
        updateValue(slider);
        updateValuePosition(slider);
        updateLabels(slider);
        updateProgress(slider);
        setTicks(slider);
    }
}

function onSliderInput(event) {
    updateValue(event.target);
    updateValuePosition(event.target);
    updateLabels(event.target);
    updateProgress(event.target);
}

function updateValue(slider) {
    let value = document.getElementById(slider.dataset.valueId);

    value.innerHTML = "<div>" + slider.value + "</div>";
}

function updateValuePosition(slider) {
    let value = document.getElementById(slider.dataset.valueId);

    const percent = getSliderPercent(slider);

    const sliderWidth = slider.getBoundingClientRect().width;
    const valueWidth = value.getBoundingClientRect().width;
    const handleSize = slider.dataset.handleSize;

    let left = percent * (sliderWidth - handleSize) + handleSize / 2 - valueWidth / 2;

    left = Math.min(left, sliderWidth - valueWidth);
    left = slider.value === slider.min ? 0 : left;

    value.style.left = left + "px";
}

function updateLabels(slider) {
    const value = document.getElementById(slider.dataset.valueId);
    const minLabel = document.getElementById(slider.dataset.minLabelId);
    const maxLabel = document.getElementById(slider.dataset.maxLabelId);

    const valueRect = value.getBoundingClientRect();
    const minLabelRect = minLabel.getBoundingClientRect();
    const maxLabelRect = maxLabel.getBoundingClientRect();

    const minLabelDelta = valueRect.left - (minLabelRect.left);
    const maxLabelDelta = maxLabelRect.left - valueRect.left;

    const deltaThreshold = 32;

    if (minLabelDelta < deltaThreshold) minLabel.classList.add("hidden");
    else minLabel.classList.remove("hidden");

    if (maxLabelDelta < deltaThreshold) maxLabel.classList.add("hidden");
    else maxLabel.classList.remove("hidden");
}

function updateProgress(slider) {
    let progress = document.getElementById(slider.dataset.progressId);
    const percent = getSliderPercent(slider);

    progress.style.width = percent * 100 + "%";
}

function getSliderPercent(slider) {
    const range = slider.max - slider.min;
    const absValue = slider.value - slider.min;

    return absValue / range;
}

function setTicks(slider) {
    let container = document.getElementById(slider.dataset.tickId);
    const spacing = parseFloat(slider.dataset.tickStep);
    const sliderRange = slider.max - slider.min;
    const tickCount = sliderRange / spacing + 1; // +1 to account for 0

    for (let ii = 0; ii < tickCount; ii++) {
        let tick = document.createElement("span");

        tick.className = "tick-slider-tick";

        container.appendChild(tick);
    }
}

function onResize() {
    const sliders = document.getElementsByClassName("tick-slider-input");

    for (let slider of sliders) {
        updateValuePosition(slider);
    }
}

window.onload = init;
window.addEventListener("resize", onResize);