I want to create a range like you see in the picture below:
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.