How to move the text with range
Solution 1:
If the solution I developed below is used, it is necessary to develop a transform function to evaluate the new position of the text. The following equation generates the margin value for the new position according to the change amount. For example;
T(x) = x * 4 + 60;
If there isn't an easier method, the transform function should also take the page width as input:
T(x, width)
let output = document.getElementById('result');
let distance = document.getElementById('distance');
function changeValue(value){
output.innerHTML = `${50 - parseInt(value)}`;
/* If this method is used, it is necessary to develop a transformation method. */
let result = parseInt(value) * 4 + 60;
distance.style.marginLeft = `${result}px`;
}
changeValue(40);input{
margin-left: 100px;
}
#distance{
width: 200px;
}<div class="form-group">
<label for="distance" class="form-label">Aranılan lokasyona uzaklık</label>
<div id="distance">
<output id="result">40</output>
<span> km uzaklık</span>
</div>
<input onchange="changeValue(this.value)" type="range" value="40" min="0" max="50" oninput="this.nextElementSibling.value = this.value" class="form-range" id="distance">
<div class="total-distance">Total: 50</div>
</div>