如何在不捕捉刻度线的情况下创建输入范围

Question

考虑下面我从MDN 网络文档复制的代码：

<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>

正如您所看到的，结果是一个带有刻度线的漂亮范围。但是，当您尝试选择非常接近刻度线值的值时，使用鼠标拖动作为输入时，范围输入将捕捉到该值。人们可以使用一种解决方法来使用键盘来获取这些值，但这不是一种直观或易于访问的方法。这使得在某些情况下无法选择这些值，因此不是我所需要的，因为这些值也是有效的选项。

阅读MDN 网络文档上的文档：

提供的值是建议，而不是要求：用户可以从此预定义列表中进行选择或提供不同的值。

显然，我在这里遇到了不同的情况，至少对于鼠标拖动输入来说是这样。我已在 Chrome 和 Firefox 上尝试过此代码片段，以排除任何浏览器实现不一致的情况。

如何添加带有刻度线的输入范围而不包括捕捉？