如何移动范围内的文本

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>

Answer 2

好老的原生 JS...真是轻而易举！

首先，查看下面的代码片段

现在 - 让我们分解解决方案

CSS - 样式属性允许移动标签有自己的宽度 + 能够移动（根据需要）

JS - 注册事件（我使用了 mouse up 事件，但您可以使用 on change 事件或任何其他符合您要求的事件） .然后，做一个简单的计算——我们进步了多少，投影到实际的input大小。唯一剩下的就是将新位置调整到您的标签

希望这能帮助您开始工作

享受

function x(input) {
    const percent = input.value / 50
  const position = percent * input.clientWidth
  const labelElement = document.querySelector('.distance')
  labelElement.style.left = `${position - labelElement.clientWidth / 2}px`
}

.distance {
  display: inline-block;
  position: relative;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
  <label for="distance" class="form-label">Aranılan lokasyona uzaklık</label>
  <br/>
  <div class="distance">
    <output>40 </output>
    <span>km uzaklık</span>
  </div>
  <input onMouseUp=x(this) 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>

如何移动范围内的文本

How to move the text with range

html

javascript

css

bootstrap-4