I checked your code. There were multiple problems with it. Firstly, you don't have ui object in hover function. So, you can't access it. The hover event fires only when mouser enter and mouser leave occurs. So, you got put the hover function inside the slide function to show the changing value when you drag the handle. I have also added some other modifications.
Javascript after the modifications:
$("#slider-range").slider({
range: true,
step: 5,
min: 100,
max: 500,
values: [150, 300],
slide: function (event, ui) {
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
$('.ui-slider-handle:first').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[0] + '</div></div>');
$('.ui-slider-handle:last').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[1] + '</div></div>');
}
});
$("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));
$( ".ui-slider-handle" ).mouseleave(function() {
$('.ui-slider-handle').html("");
})
$( ".ui-slider-handle" ).mouseenter(function() {
var value = $( "#slider-range" ).slider( "option", "values" );
$('.ui-slider-handle:first').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + value[0] + '</div></div>');
$('.ui-slider-handle:last').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + value[1] + '</div></div>');
})