Firefox 和 chrome 的自定义范围滑块剪裁不一致

如何解决Firefox 和 chrome 的自定义范围滑块剪裁不一致

我正在使用 CSS 样式开发自定义范围滑块，但在一致性方面存在问题。任何关于这是否可以完成的帮助，或者为什么这不能工作的原因，或者其他选择，都表示赞赏。

为了创建这个，我使用了拇指的阴影 &、偏移它并在轨道后面剪裁（我试图制作一个类似于 Apple OS 滑块、Miui 滑块或三星上的新滑块外观的样式组件一个用户界面）。附件将是更明确地突出我的问题的图片。

剪裁前的样式（使用 overflow : hidden 这样做）。我已经对轮廓进行了着色，以便可以注意到我的问题。似乎有某种不可见的边距和/或填充，在拇指（内部较深的红色矩形）和整体范围滑块（灰色边框轮廓）之间留下了间隙
在这里，我在 overflow : hidden 和 [type=range]::-webkit-slider-runnable-track 块中包含了样式 [type=range]::-moz-range-track，结果是 Chrome 的一些东西，但 Firefox 没有变化。关于为什么会有帮助的解释（不幸的是，我也不知道如何使用 Firefox 调试工具以及 Chrome）
这里我在主 overflow : hidden 块中包含了 [type=range] 并且它做了它应该做的。然而，正如图 1 中所指出的，因为有一个差距，我无法弄清楚 Firefox 版本的原因，它呈现出与 Chrome 版本不同（这是我想要的风格）

下面的代码示例，没有围绕拇指和轨道的调试轮廓。这应该按预期呈现 chrome，但 Firefox 不是。还没有检查样式是否与其他浏览器兼容，因为我现在专注于这些。

[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 160px;
  background: transparent;
  overflow: hidden;
}
[type=range]:focus {
  outline: 0;
}
[type=range]::-moz-range-thumb {
  cursor: default;
  border: 0;
  Box-shadow: -80px 0px 0px 80px #e30425;
  height: 6px;
  width: 4px;
  border-radius: 0%;
  background: #e30425;
}
[type=range]::-webkit-slider-thumb {
  appearance: none;
  margin-top: 0px;
  cursor: default;
  border: 0;
  Box-shadow: -80px 0px 0px 80px #e30425;
  height: 6px;
  width: 4px;
  border-radius: 0%;
  background: #e30425;
}
[type=range]::-moz-range-track {
  cursor: default;
  border: 0;
  overflow: hidden;
  height: 6px;
  width: 160px;
  border-radius: 8px;
  background: rgba(227,4,37,0.38);
}
[type=range]::-webkit-slider-runnable-track {
  cursor: default;
  border: 0;
  overflow: hidden;
  height: 6px;
  width: 160px;
  border-radius: 8px;
  background: rgba(227,0.38);
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #ffffff;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <Meta charset="UTF-8">
  <Meta http-equiv="X-UA-Compatible" content="IE=edge">
  <Meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Styles w/ CSS</title>
  <link rel="stylesheet" href="./pub/index.css">
</head>

<body>

  <input type="range" value="100" min="0" max="127">

</body>

</html>

唯一的选择（虽然我不喜欢它）是让拇指和 Firefox 框边框一样宽。不过，这意味着，我仍然不能拥有圆角，这是我仍然想要的功能，但目前我唯一能想到的就是。