如何用0-100的上拖更新显示范围元素值

How to show range element value with an ondrag update of 0-100?

本文关键字：显示 范围 元素 更新 何用 0-100      更新时间：2023-09-26

如何显示范围元素的值，拖拽它的值应该是0-100个值，当用户拖拽范围时，这些值应该像工具提示一样出现。

0<input type="range" id="range"/>100

实现这个结果有很多可能性。如果你想使用工具提示，你可以看看Defining_Cross-Browser_Tooltips。

相反，你可以用css创建你自己的工具提示，并在拖动时更新它的值:

document.getElementById('range').addEventListener('input', function(e) {
  //this.title = this.value;
  document.getElementsByClassName('tooltiptext')[0].textContent = this.value;
})
.tooltip {
  position: relative;
  display: inline-block;
  margin-top: 100px;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 1s;
}
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <div class="tooltip">
        0<input type="range" id="range" value="0" min="0" max="100"/>100
        <span class="tooltiptext">0</span>
    </div>
</form>

我在下面做了一个简单的JQ。

工具提示(如果您希望它跟随并移动取决于您左右滑动的范围按钮)要复杂得多，这不是一个代码制作网站。如果你尝试了一件事而你没有成功，请让我们看看。

同时，请看这个链接。它可能会帮助你，从这里开始:范围输入值气泡

$("input").on("change mousemove",function(){
$('output').html( $(this).val() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
0<input type="range" id="range" min="0" max="100"/>100
<output for="range" ></output>

相关文章：