I have this sliding bar and I can get the thumbs and slide to align.
enter image description here

I am new to css and this is a pain gpt not working out.
I am not sure if it is conflicking css files or not. any help is appreciated.
End goal is to have pro on top and -7 on bottom of left thumb. The right am on top 54 on bottom of right thumb.

I tried to adjust all these fields and nothing seems to be right. the slide left/right and thumb left/right do not adjust like i think it should.

.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;
}