如何将工具提示附加到输入类型范围滑块并更新值

Question

我有一个带有五个断点的滑块，如下面的示例代码所示。我想将工具提示附加到滑块拇指，并根据每个断点的 4.25% 兴趣动态更新工具提示值。

我怎样才能实现这个目标？我尝试使用基本的 HTML，但似乎可能需要 Javascript？或者纯CSS可以吗？

任何指导或示例将不胜感激！

.input-range {
  -webkit-appearance: none;
  width: 100%;
  height: 24px;
  border-radius: 10px;
  background-color: #ecedee;
  outline: none;
  padding: 0;
  margin: 0 0 10px 0
}

.input-range::-ms-track {
  width: 100%;
  cursor: pointer;
  background: rgba(0, 0, 0, 0);
  border-color: rgba(0, 0, 0, 0);
  color: rgba(0, 0, 0, 0);
  border: 3px 0
}

.input-range::-ms-fill-lower {
  background-color: rgba(0, 0, 0, 0)
}

.input-range::-ms-fill-upper {
  background-color: rgba(0, 0, 0, 0)
}

.input-range::-ms-tooltip {
  display: none
}

.input-range::-webkit-slider-thumb {
  appearance: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #006fcf;
  cursor: pointer;
  border: none
}

.input-range::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #006fcf;
  cursor: pointer;
  border: none
}

.input-range::-ms-thumb {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #006fcf;
  cursor: pointer;
  border: none
}

.input-range:focus {
  outline: #97999b dashed 1px !important;
  outline-offset: 3px
}

.values {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px
}

.tooltip {
  position: absolute;
  top: 20px;
  left: 0;
  background-color: #008085;
  color: white;
  padding: 8px 16px;
  border-radius: 100px;
}

.wrapper {
  position: relative;
  padding-top: 68px;
}

<div class="wrapper">
  <div class="tooltip">
    10,625
  </div>
  <input aria-valuenow="3898" aria-valuemin="1299" aria-valuemax="42500" type="range" class="input-range" aria-label="Interest Calculator Slider" min="0" step="1" max="4" value="1">
  <div class="values">
    <div class="value_1">$250,000 <span>(10,625)</span> </div>
    <div class="value_2">$500,000 <span>(21,250)</span> </div>
    <div class="value_3">$1,000,000 <span>(42,500)</span> </div>
    <div class="value_4">$3,000,000 <span>(1,27,500)</span> </div>
    <div class="value_5">$5,000,000 <span>(2,12,500)</span> </div>
  </div>
</div>

Answer 1

您可以在范围上使用事件侦听器，然后使用范围值作为索引来查询类

.value

的子级，然后在一些基本操作后设置工具提示文本在 change eventListener 的回调方法中进行格式化。

请参阅下面代码片段中的评论，如果这不是您想要的，请告诉我。

// get elements and assign variables
const values = document.querySelector('.values');
// query the child divs in the class 'values'
const valueDivs = values.querySelectorAll('div');
// get the tooltip 
const tooltip = document.querySelector('.tooltip');
// get the input
const inputRange = document.querySelector('.input-range');

// callback method to assign and format tooltip, pass in event
const changeValue = e => {
  // get the number using the returned index from the slider input
  // then query the values child element using its index 
  // format the textContent and replace all but numbers
  const number = valueDivs[e.target.value].querySelector('span').textContent.replace(/[^0-9.]+/g, '');
  // format using Number() and toLocalString() and assign to tooltip textContent
  tooltip.textContent = Number(number).toLocaleString();
}

// event for change on the input-range
inputRange.addEventListener('change', changeValue)

.input-range {
  -webkit-appearance: none;
  width: 100%;
  height: 24px;
  border-radius: 10px;
  background-color: #ecedee;
  outline: none;
  padding: 0;
  margin: 0 0 10px 0
}

.input-range::-ms-track {
  width: 100%;
  cursor: pointer;
  background: rgba(0, 0, 0, 0);
  border-color: rgba(0, 0, 0, 0);
  color: rgba(0, 0, 0, 0);
  border: 3px 0
}

.input-range::-ms-fill-lower {
  background-color: rgba(0, 0, 0, 0)
}

.input-range::-ms-fill-upper {
  background-color: rgba(0, 0, 0, 0)
}

.input-range::-ms-tooltip {
  display: none
}

.input-range::-webkit-slider-thumb {
  appearance: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #006fcf;
  cursor: pointer;
  border: none
}

.input-range::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #006fcf;
  cursor: pointer;
  border: none
}

.input-range::-ms-thumb {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #006fcf;
  cursor: pointer;
  border: none
}

.input-range:focus {
  outline: #97999b dashed 1px !important;
  outline-offset: 3px
}

.values {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px
}

.tooltip {
  position: absolute;
  top: 20px;
  left: 0;
  background-color: #008085;
  color: white;
  padding: 8px 16px;
  border-radius: 100px;
}

.wrapper {
  position: relative;
  padding-top: 68px;
}

<div class="wrapper">
  <div class="tooltip">
    10,625
  </div>
  <input aria-valuenow="3898" aria-valuemin="1299" aria-valuemax="42500" type="range" class="input-range" aria-label="Interest Calculator Slider" min="0" step="1" max="4" value="1">
  <div class="values">
    <div class="value_1">$250,000 <span>(10,625)</span> </div>
    <div class="value_2">$500,000 <span>(21,250)</span> </div>
    <div class="value_3">$1,000,000 <span>(42,500)</span> </div>
    <div class="value_4">$3,000,000 <span>(1,27,500)</span> </div>
    <div class="value_5">$5,000,000 <span>(2,12,500)</span> </div>
  </div>
</div>