jquery range slider values which follows the handles?

jquery range slider values which follows the handles?

I'm playing with jquery range slider, I've managed to split two values in
different inputs. Now don't get mad at me, I'm still nooby about jquery
and I was wondering how to set up that each input follow its handle on
slider?
Like in this examples: http://egorkhmelev.github.io/jslider/
My code till now looks like this:
script:
$(function() {
$( ".slider-assets" ).slider({
range: true,
min: 100,
max: 500,
values: [ 200, 300 ],
slide: function( event, ui ) {
$( ".amount-assets1" ).val( ui.values[ 0 ] + "k €");
$( ".amount-assets2" ).val( ui.values[ 1 ] + "k €" );
}
});
$( ".amount-assets1" ).val($( ".slider-assets" ).slider( "values",
0 ) + "k €" );
$( ".amount-assets2" ).val($( ".slider-assets" ).slider( "values",
1 ) + "k €" );
});
html:
<input type="text" class="amount-assets1" />
<input type="text" class="amount-assets2" />
<div class="slider-assets"></div>
css:
.amount-assets1,.amount-assets2{
width: 48px;
}
and you can see and play with my jsfiddle here:
http://jsfiddle.net/dzorz/sJBLh/
The problem is that I don't know from where to start. Do I need another
one plugin that puts tooltip above handles or something else?
Any suggestion and solutions are welcome.
Thanks.