How to move the text with range

I want to create a range like you see in the picture below:

enter image description here

Here is my code for this:

     <div class="form-group">
       <label for="distance" class="form-label">Aranılan lokasyona uzaklık</label>
       <div class="distance">
         <output>40 </output>
         <span>km uzaklık</span>
      </div>
      <input type="range" value="40" min="1" max="50" oninput="this.nextElementSibling.value = this.value" class="form-range" id="distance">
      <div class="total-distance">50</div>
    </div>

So what I am trying to achieve, I want to move this with the range input.

PS: I am using bootstrap for range.