javascript - Jquery UI slider how to make a box follow the handler?

Question

I am trying to create a div that should follow the handler as it is seen here: http://m1.dk/Priser/#tab:#calc,#abb

My JSfiddle: http://jsfiddle.net/z3xV3/2/

I also want to make a calculation on the UI value that should appear in the box.

Here is a illustration what I want to achieve:

HTML:

<div id="slider"></div>
<input id="sliderValue" />

Jquery:

$(document).ready(function() {


 // Pris slider
$("#slider").slider({value:'',min: 0,max: 150,step: 1, range: 'min',
    slide: function( event, ui ) {
        $( "#amount" ).html( ui.value + ' timer');
    }
});

    $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );


});

Answer 1

I hope that's the effect you're looking for: http://jsfiddle.net/z3xV3/11/

JS

$(document).ready(function() {

    $("#slider").slider({value:'', min: 0, max: 150, step: 1, range: 'min'});

    var thumb = $($('#slider').children('.ui-slider-handle'));   
    setLabelPosition();    

    $('#slider').bind('slide', function () {        
        $('#sliderValue').val($('#slider').slider('value'));
        setLabelPosition();
    });

    function setLabelPosition() {
        var label = $('#sliderValue');
        label.css('top', thumb.offset().top + label.outerHeight(true));
        label.css('left', thumb.offset().left - (label.width() - thumb.width())/ 2);  
    }

});

HTML

<div id="slider"></div>
<input id="sliderValue" />

CSS

#sliderValue {
    position:absolute;
    width: 50px;
}

Best regards!