Display <span> inside of input range thumb

Question

I want to achieve A range styling that looks like this in react, without using an external library:

That's how my current range input looks:

HTML:

<span className="pl-slider">
  <span className="pl-slider-track" />
  <span className="pl-slider-marks-container">{sliderMarks}</span>
  <input
    className="pl-slider-input"
    type="range"
    min={min}
    max={max}
    value={value}
    step={step}
    onChange={handleValueChange}
  />
</span>

CSS:

.pl-slider {
  width: 100%;
  height: 24px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  touch-action: none;
  direction: ltr;
}

.pl-slider-input::-webkit-slider-runnable-track {
  height: 2px;
  cursor: pointer;
  background-color: transparent;
  width: calc(100% + 14px);
}

.pl-slider-track {
  background: #dedef4;
  height: 2px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  width: 100%;
}

.pl-slider-input {
  height: 0px;
  width: calc(100% + 14px);
  margin: 0 0 0 -7px;
  appearance: none;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

.pl-slider-input::-webkit-slider-thumb {
  position: relative;
  justify-content: center;
  background: #dedef4;
  height: 24px;
  width: 24px;
  margin-top: -11px;
  border-radius: 50%;
  cursor: pointer;
  -webkit-appearance: none;
}

I want to add a text span which display the current value of the input. Thing is, I can't figure out how to display it inside the thumb.