试图获取当前位置的工具提示

Question

我有一个滑块和一个小的输入文本框，它会根据您在其上滚动的位置进行更新。

这里是javascript：

$(function() {
  
  var tooltip = $('<div id="tooltip" />').css({
    position: 'absolute',
    top: -25,
    left: -10
}).hide();
    $("#client-slider").slider({
      range: "min",
      value: 30,
      min: 15,
      max: 300,
      slide: function(event, ui) {
        $('#client').val(ui.value).trigger("change");
           tooltip.text(ui.value);
      },
    change: function(event, ui) {}
}).find(".ui-slider-handle").append(tooltip).hover(function() {
    tooltip.show();
}, function() {
    tooltip.hide();
});
    });
    $("#client").val($("#client-slider").slider("value"));
  }

这里是 html/css：

<input type="text" id="client" style="width:50px;text-align:center"/>
<div id="slider"></div>​

我收到一个错误，无法在我的滑块上显示工具提示

**请注意它不是任何现有问题的重复 - 我试图从这个 answer 获得帮助，但都是徒劳的

Answer 1

从旧帖子中获取答案通常是个坏主意。这个实现更新了很多，也没有那么复杂：

document.getElementById("slider").addEventListener("input", function(event) {
  document.getElementById("budget").value = event.target.value;
})

<input type="text" id="budget" style="width:50px;text-align:center"/>
<input id="slider" type="range" min="15" max="300" value="15"/>

完整代码：

<input type="text" id="budget" style="width:50px;text-align:center"/>
<input id="slider" type="range" min="15" max="300" value="15"/>

<script type="text/javascript">
    document.getElementById("slider").addEventListener("input", function(event) {
        document.getElementById("budget").value = event.target.value;
    })
</script>

对于基于 answer 的 JQUERY 实现：

    var tooltip = $('<div id="tooltip" />').css({
    position: 'absolute',
    top: -25,
    left: -10
}).hide();

$("#slider").slider({
    value: 500,
    min: 0,
    max: 1000,
    step: 50,
    slide: function(event, ui) {
        tooltip.text((ui.value/1000)*100 + "%");
        $( "#client" ).val((ui.value/1000)*100 + "%");
    },
    change: function(event, ui) {}
}).find(".ui-slider-handle").append(tooltip).hover(function() {
    tooltip.show()
}, function() {
    tooltip.hide()
})

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.css">

<input type="text" id="client" style="width:50px;text-align:center"/>
<div id="slider" style="margin:50px"></div>
<!-- Get ajax -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

也可以在fiddle 上试试。