Question

如何显示范围元素值，当用户拖动范围时，其值应为0-100值，然后该值应显示为工具提示。

＆＃13;

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

＆＃13;

Answer 1

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

相反，您可以使用css创建自己的工具提示，并在拖动时更新其值：

＆＃13;

document.getElementById('range').addEventListener('input', function(e) {
  //this.title = this.value;
  document.getElementsByClassName('tooltiptext')[0].textContent = this.value;
})

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

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

工具提示（如果您希望它在您向左和向右滑动时根据范围按钮跟随和移动）要复杂得多，而且这不是代码制作网站。如果你尝试了一些并且你没有成功，请告诉我们。

同时，请看此链接。它可能对您有所帮助，从这里开始：Range Input Value Bubbles

＆＃13;

$("input").on("change mousemove",function(){
$('output').html( $(this).val() );

});

＆＃13;

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

＆＃13;

如何使用0-100的ondrag更新显示范围元素值？

2 个答案: