Trying to get Tooltip for the Current Position-CodePudding

I have a slider and an small input text box which updates based on where you scroll on it.

Here is the 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"));
  }

And here is the html/css:

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

I am getting an error could not able to show tool tip on my slider

**Plz note its not the duplicate of any existing question - I was trying to get help from this answer but all in vain

CodePudding user response：

It is often a bad idea to get answers from old posts. This implementation is much more up to date and much less complicated:

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

Full code:

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

For the JQUERY implementation based off this answer:

    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>

Try it on fiddle as well.