Javascript 输入类型范围气泡显示值在启动时未正确显示

我在显示输入类型=“范围”的值时遇到问题。页面加载时，气泡位于输入的左侧

但我的目标是使气泡始终位于滑块拇指上方。像这样

我不知道为什么，但当我点击滑块拇指并尝试设置新值时，问题消失了，气泡工作正常。只有在加载页面时才会出现此问题。有人知道问题出在哪里吗？多谢各位

---

Codesandbox链接：

您可以在开始时使用css手动添加它，如：

.range-value {
  //other code you write
  left: calc(49.4949% + 0.10101px);
}

---

谢谢！：）你能解释一下为什么会有这些数字吗？49.4949%+0.10101px？您可以使用开发人员控制台简单地替换它。如果您在更改范围值时查看开发控制台，您将看到值50是

calc（49.4949%+0.10101px）

。不客气；）我不知道刚刚发生了什么，但我已经尝试设置不同的最小值和最大值，所以它将是合法的BMI计算器，它使整个应用程序崩溃，我不知道为什么。我还不能创建新的线程。但我已经更新了codesandbox：正如您所看到的，第二个输入类型范围根本不起作用。数字正在显示，但气泡根本没有移动。。第二个问题是，当你拖动滑块拇指的时候，会产生这种效果。。这一切都发生在我更改最小值和最大值时。