为什么我的范围滑块拇指工具提示未显示该值？

Question

在我的一个项目中，我有一个范围滑块。我的范围滑块有两个拇指。一种为最小值，一种为最大值。所以有两个拇指来控制范围。我想在两者中都包含一个工具提示，这样当我拖动其中一个拇指时，它会显示拇指位置的值供用户查看。

我用js给两个大拇指添加了工具提示，显示大拇指的值，让用户轻松了解范围。

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

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

.slider {
  position: relative;
  z-index: 1;
  height: var(--2, 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: var(--gray-200, #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;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<div class="price-range-section">
  <label for="Price Range">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>

      <!-- Tooltips -->
      <div class="tooltip" id="tooltip-left"></div>
      <div class="tooltip" id="tooltip-right"></div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Answer 1

类

tooltip

有

opacity:0

，所以尝试覆盖它：

.tooltip {
  opacity: 1 !important;
}

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

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

.slider {
  position: relative;
  z-index: 1;
  height: var(--2, 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: var(--gray-200, #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;
  opacity: 1 !important;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<div class="price-range-section">
  <label for="Price Range">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>

      <!-- Tooltips -->
      <div class="tooltip" id="tooltip-left"></div>
      <div class="tooltip" id="tooltip-right"></div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>