为何我的双滑块Range Slider的Thumb Tooltip无法显示数值？

我实现了一个带双滑块的范围选择器，左右手柄分别控制最小值和最大值，同时为两个手柄添加了tooltip，拖动时实时显示当前数值，提升用户操作的直观性。

完整代码实现 #

HTML 结构 #

<div class="price-range-section">
  <label for="Price Range">价格范围</label>
  <div class="middle">
    <div class="multi-range-slider">
      <input type="range" id="price-min-slider" min="0" max="100" value="25">
      <input type="range" id="price-max-slider" min="0" max="100" value="75">

      <div class="slider">
        <div class="track"></div>
        <div class="range"></div>
        <div class="thumb left"></div>
        <div class="thumb right"></div>
      </div>

      <!-- 提示框 -->
      <div class="tooltip" id="tooltip-left"></div>
      <div class="tooltip" id="tooltip-right"></div>
    </div>
  </div>
</div>

CSS 样式 #

.middle {
  position: relative;
  width: 100%;
  max-width: 500px;
}

.slider {
  position: relative;
  z-index: 1;
  height: 8px;
}

.slider>.track {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 5px;
  background-color: #E5E7EB;
}

.slider>.range {
  position: absolute;
  z-index: 2;
  left: 25%;
  right: 25%;
  top: 0;
  bottom: 0;
  border-radius: 5px;
  background-color: #1C64F2;
}

.slider>.thumb {
  position: absolute;
  z-index: 3;
  width: 22px;
  height: 22px;
  background-color: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(98, 0, 238, .1);
  transition: box-shadow .3s ease-in-out;
  stroke-width: 1px;
  stroke: #E5E7EB;
  filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.08));
}

.slider>.thumb.left {
  left: 25%;
  transform: translate(-15px, -10px);
}

.slider>.thumb.right {
  right: 25%;
  transform: translate(15px, -10px);
}

input[type=range] {
  position: absolute;
  pointer-events: none;
  -webkit-appearance: none;
  z-index: 2;
  height: 10px;
  width: 100%;
  opacity: 0;
}

input[type=range]::-webkit-slider-thumb {
  pointer-events: all;
  width: 22px;
  height: 22px;
  border-radius: 0;
  border: 0 none;
  background-color: red;
  -webkit-appearance: none;
}

.tooltip {
  position: absolute;
  display: none;
  background-color: #1C64F2;
  color: #FFFFFF;
  padding: 5px;
  border-radius: 5px;
  font-size: 12px;
  white-space: nowrap;
}

JavaScript 逻辑 #

var PriceMinSlider = document.getElementById("price-min-slider");
var PriceMaxSlider = document.getElementById("price-max-slider");

var thumbLeft = document.querySelector(".slider > .thumb.left");
var thumbRight = document.querySelector(".slider > .thumb.right");
var range = document.querySelector(".slider > .range");

var tooltipLeft = document.getElementById("tooltip-left");
var tooltipRight = document.getElementById("tooltip-right");

function setLeftValue() {
  var _this = PriceMinSlider,
    min = parseInt(_this.min),
    max = parseInt(_this.max);

  _this.value = Math.min(parseInt(_this.value), parseInt(PriceMaxSlider.value) - 1);

  var percent = ((_this.value - min) / (max - min)) * 100;

  thumbLeft.style.left = percent + "%";
  range.style.left = percent + "%";
  updateTooltipPosition();
}

setLeftValue();

function setRightValue() {
  var _this = PriceMaxSlider,
    min = parseInt(_this.min),
    max = parseInt(_this.max);

  _this.value = Math.max(parseInt(_this.value), parseInt(PriceMinSlider.value) + 1);

  var percent = ((_this.value - min) / (max - min)) * 100;

  thumbRight.style.right = (100 - percent) + "%";
  range.style.right = (100 - percent) + "%";
  updateTooltipPosition();
}

setRightValue();

function updateTooltipPosition() {
  var thumbLeftPosition = thumbLeft.getBoundingClientRect();
  var thumbRightPosition = thumbRight.getBoundingClientRect();

  tooltipLeft.style.display = "block";
  tooltipLeft.style.left = thumbLeftPosition.left + "px";
  tooltipLeft.style.top = thumbLeftPosition.bottom + 5 + "px";
  tooltipLeft.innerHTML = PriceMinSlider.value;

  tooltipRight.style.display = "block";
  tooltipRight.style.left = thumbRightPosition.left + "px";
  tooltipRight.style.top = thumbRightPosition.bottom + 5 + "px";
  tooltipRight.innerHTML = PriceMaxSlider.value;
}

thumbLeft.addEventListener("mouseover", function() {
  tooltipLeft.style.display = "block";
});

thumbLeft.addEventListener("mouseout", function() {
  tooltipLeft.style.display = "none";
});

thumbRight.addEventListener("mouseover", function() {
  tooltipRight.style.display = "block";
});

thumbRight.addEventListener("mouseout", function() {
  tooltipRight.style.display = "none";
});

PriceMinSlider.addEventListener("input", setLeftValue);
PriceMaxSlider.addEventListener("input", setRightValue);

PriceMinSlider.addEventListener("mousedown", function() {
  thumbLeft.classList.add("active");
});

PriceMinSlider.addEventListener("mouseup", function() {
  thumbLeft.classList.remove("active");
});

PriceMaxSlider.addEventListener("mousedown", function() {
  thumbRight.classList.add("active");
});

PriceMaxSlider.addEventListener("mouseup", function() {
  thumbRight.classList.remove("active");
});

功能说明 #

• 左右滑块分别控制最小值和最大值，逻辑上确保最小值始终小于最大值
• 鼠标悬停在滑块手柄上时显示tooltip，拖动过程中实时更新数值和提示框位置
• tooltip始终跟随手柄移动，固定显示在手柄下方5px处

内容的提问来源于stack exchange，提问作者Rejuan hossain