上面的代码是用HTML制作的范围滑块。

这是它的外观示例。

顺晟科技：

我知道这是旧的，但我在这里张贴它，因为我遇到了同样的问题。虽然安东的回答是好的，如果你的自定义范围组件总是有最小的0，它打破道琼斯当不是这样的情况。因此，如果您的范围最小为2，最大为10，气泡将无法正确对齐。

要解决这个问题，在calcThumbStep中，我们需要更改计算以考虑最小值

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}

稍后，在input元素本身的转换计算中，我们需要更新它，以说明该元素何时处于最左边的位置，且最小值不为0。

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}

要获得完整的代码参考，请查看安东的答案，只需交换我的更改。 希望这能帮助其他人。

对于解决方案，首先需要得到输入的范围，然后是步长的宽度，因为范围会大于你的最大值，气泡不能按中心放置到拇指上。最后，乘以range和step得到气泡位置。泡泡最好使用SVGcreate bubble创建。对于设置范围输入的样式link