范围滑块的拇指与文本答案

【问题标题】：Range Slider's thumb with text范围滑块的拇指与文本
【发布时间】：2022-01-22 01:22:48
【问题描述】：

是否可以制作带有拇指文本的范围滑块（js 或 jQuery）？

像这样

我尝试了下面的代码，但它不起作用

.slider::-webkit-slider-thumb::after: content='08:00-10:00'

&lt;input type="range" min="0" max="100" value="0" step='25'&gt;

【问题讨论】：

使用标准 HTML range 输入无法做到这一点。您需要使用自定义控件。
当整个（扩展的）“拇指”都适合滑块时，我可以看到它对用户来说看起来不错 - 尽管可能指示拇指中间的东西可能有用，但是做什么你希望它看起来像当用户选择一个值时的结果吗？

标签： javascript html jquery css

【解决方案1】：

您可以创建一个位于范围滑块顶部的元素。我有一个示例，其中.range-text 元素与滑块大小相同，因此在移动它时感觉与常规输入相同，并且文本/位置通过 JS 更新。希望它能让您了解如何创建一些东西来满足您的需求

const rangeInput = document.querySelector('input[type="range"]');
const rangeText = document.querySelector('.range-text');

rangeInput.addEventListener('change', (e) => {
  let newVal = e.target.value;
  let negNewVal = -1 * newVal;
  
  rangeText.style.left = (newVal + '%'); //Set range left position
  rangeText.style.transform = 'translate(' + negNewVal + '%, 2px)'; //Set range translate to correct
  rangeText.innerHTML = newVal; //Set range text equal to input position
})

.input-container {
  position: relative;
  display: flex;
  background: black;
  width: 100%;
  padding: 0;
}
input[type="range"] {
  appearance: none;
  background-color: white;
  width: 100%;
  height: 20px;
  padding: 0;
}
input[type="range"]::-webkit-slider-thumb {
  -moz-appearance: none !important;
  appearance: none !important;
  position: relative;
  height: 20px;
  width: 100px;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}
input[type="range"]::-moz-range-thumb {
  -moz-appearance: none !important;
  appearance: none !important;
  position: relative;
  height: 20px;
  width: 100px;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}
.range-text {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: skyblue;
  text-align: center;
  line-height: 1;
  height: 20px;
  width: 100px;
  transform: translate(0, 2px);
}

<div class="input-container">
  <input type="range" min="0" max="100" value="0" step='25'>
  <div class="range-text">0</div>
</div>

【讨论】：