如何创建不吸附刻度标记的input range输入控件

我使用了一段生成带刻度标记range滑块的代码：

<label for="temp">Choose a comfortable temperature:</label><br />
<input type="range" id="temp" name="temp" list="tickmarks" />

<datalist id="tickmarks">
  <option value="0"></option>
  <option value="25"></option>
  <option value="50"></option>
  <option value="75"></option>
  <option value="100"></option>
</datalist>

这段代码的问题在于，鼠标拖动滑块接近刻度值时，滑块会自动吸附到对应刻度；虽然键盘操作能选中中间值，但这种方式不够直观，也不方便访问，而中间值本身是有效的可选值。

查文档看到描述：

The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.

但实际体验和描述不符，我已经在Chrome和Firefox中测试过，排除了浏览器实现差异的问题。

解决方案：用CSS自定义刻度标记，替代原生datalist #

原生datalist和input[type="range"]的组合会触发吸附行为，因此需要通过CSS手动绘制刻度，同时保留滑块的自由拖动特性。

实现代码：

<div class="range-container">
  <label for="temp">选择舒适的温度:</label>
  <input type="range" id="temp" name="temp" min="0" max="100" step="1">
  <div class="tick-marks"></div>
</div>

.range-container {
  position: relative;
  width: 300px;
}

#temp {
  width: 100%;
  margin: 15px 0;
}

.tick-marks {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 30px;
  width: 100%;
}

.tick-marks::before,
.tick-marks::after {
  content: '';
  flex-grow: 1;
  height: 2px;
  background: #ccc;
  margin: 0 2px;
}

.tick-marks span {
  height: 8px;
  width: 2px;
  background: #666;
  display: block;
}

补充说明：

• 用容器包裹滑块和刻度元素，通过绝对定位让刻度与滑块精准对齐
• 刻度容器tick-marks通过flex布局均匀分布刻度线，::before和::after用来填充刻度间的间隔线
• 滑块设置step="1"，确保可以选中所有中间值，不会有吸附限制
• 如果需要显示刻度数值，可在tick-marks中添加对应文本，比如：

<div class="tick-marks">
  <span>0</span>
  <span>25</span>
  <span>50</span>
  <span>75</span>
  <span>100</span>
</div>

再调整CSS让文本与刻度线对齐即可。

内容的提问来源于stack exchange，提问作者Robin Bastiaan