双滑块滑动条对齐异常求助（附CSS代码）

我制作的双滑块滑动条存在滑块（thumb）与滑动轨道无法正确对齐的问题。作为CSS新手，我尝试借助GPT解决但未成功，不确定是否存在CSS文件冲突，恳请各位提供帮助。

我的最终目标：

• 左侧滑块上方显示“pro”、下方显示“-7”
• 右侧滑块上方显示“am”、下方显示“54”

我调整了各类CSS属性均无效果，滑动轨道与滑块的左右位置表现不符合预期。以下是我的CSS代码：

.container {
  height: 10vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.slider {
  position: relative;
  width: 200px;
  margin: 0 auto; /* Center the slider */
}

.slider__track,
.slider__range,
.slider__left-value,
.slider__right-value {
  position: absolute;
}

.slider__track,
.slider__range {
  border-radius: 3px;
  height: 5px;
}

.slider__track {
  background-color: #ced4da;
  width: 100%;
  z-index: 1;
}

.slider__range {
  background-color: #9fe5e1;
  z-index: 2;
}

.slider__left-value,
.slider__right-value {
  color: #dee2e6;
  font-size: 16px;
  margin-top: 20px;
}

.slider__left-value {
  left: 0%; /* Adjusted to align with the left edge of the slider */
}

.slider__right-value {
  right: 0%; /* Adjusted to align with the right edge of the slider */
}

.thumb {
  pointer-events: none;
  position: absolute;
  height: 0;
  width: 200px;
  outline: none;
}

.thumb--left {
  z-index: 3;
  left: 10; /* Adjusted to align with the left edge of the slider */
}

.thumb--right {
  z-index: 4;
  right: 100; /* Adjusted to align with the right edge of the slider */
}

.thumb::-webkit-slider-thumb {
  background-color: #f1f5f7;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 1px 1px #ced4da;
  cursor: pointer;
  height: 18px;
  width: 18px;
  margin-top: 4px;
  pointer-events: all;
  position: relative;
}

.thumb::-moz-range-thumb {
  background-color: #f1f5f7;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 1px 1px #ced4da;
  cursor: pointer;
  height: 18px;
  width: 18px;
  margin-top: 4px;
  pointer-events: all;
  position: relative;
}

.label-left {
  position: absolute;
  top: -30px; /* Adjusted to move the label above the thumb */
  left: 0;
}

.label-right {
  position: absolute;
  top: -30px; /* Adjusted to move the label above the thumb */
  right: 0;
}


/* For Chrome browsers */
.thumb::-webkit-slider-thumb {
  background-color: #f1f5f7;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 1px 1px #ced4da;
  cursor: pointer;
  height: 18px;
  width: 18px;
  margin-top: 4px;
  pointer-events: all;
  position: relative;
}

/* For Firefox browsers */
.thumb::-moz-range-thumb {
  background-color: #f1f5f7;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 1px 1px #ced4da;
  cursor: pointer;
  height: 18px;
  width: 18px;
  margin-top: 4px;
  pointer-events: all;
  position: relative;
}


/* List for data range */

datalist {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  writing-mode: vertical-lr;
}

option {
  padding: 0;
}

input[type="range"] {
  margin: 0;
}

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