javascript - 如何按范围移动文本

Question

我想创建一个如下图所示的范围:

这是我的代码:

     <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>

所以我想要实现的目标是，我想通过范围输入来移动它。

PS:我正在使用 bootstrap 来确定范围。

Answer 1

如果使用我下面开发的解决方案，则需要开发一个变换函数来评估文本的新位置。以下公式根据变化量生成新仓位的margin值。例如；

T(x) = x * 4 + 60;

如果没有更简单的方法，变换函数还应该将页面宽度作为输入:

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>