jQuery slider-bar tooltip not moving in sync with slider handle

I have a jQuery slider bar I am customizing from a tutorial by Thoriq Firdaus in a Django Python application. The main feature which I was looking for was a tooltip which would update as the slider handle was being moved and which in turn would move with the slider handle, both of which this has.

However the range and the size of the original slider was too small. I require min: -100 and max: +100. I updated the JS and CSS for the slider to the requisite size easily enough. However the tooltip no longer matches or keeps pace with the slider handle. When I inspect the element with Firebug I can see that the tooltip is centered on the left of the slider and I believe it is only moving within -100px and +100px. (See images below)

Slider tooltip at near max left:

Slider tooltip at max right:

I have tried multiple solutions including setting a min: and max: range for the tooltip in JS, (never worked) and changing the CSS to try and center it and make it move inline but I cant seem to get it.

Does anyone know how to get the tooltip to replicate the movement of the slider handle, is it something i have to change in the JS or the CSS?

I also tried to replicate the issue in a JSFiddle but the slider handele does not appear.

My HTML

<section>   
    <span class="tooltip"></span>   
    <div id="slider"></div>  
</section> 

My CSS

#slider{  
    border-width: 1px;  
    border-style: solid;  
    border-color: #333 #333 #777 #333;  
    border-radius: 25px;  
    width: 700px;  
    position: absolute;  
    height: 13px;  
    background-color: #8e8d8d;  
    background: #85837A;  
    box-shadow: inset 0 1px 5px 0px rgba(0, 0, 0, .5),   
                0 1px 0 0px rgba(250, 250, 250, .5);  
    left: 20px;  
} 

.tooltip {  
    position: absolute;  
    bottom: 10px;
    display: block;  
    z-index: 1031;
    width: 35px;  
    height: 20px;  
    color: #E456ff;  
    bgcolor: #E456ff;      
    text-align: center;  
    font: 10pt Tahoma, Arial, sans-serif ;  
    border-radius: 3px;  
    border: 1px solid #333;  
    box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, .3);  
    box-sizing: border-box;  
    background: linear-gradient(top, rgba(69,72,77,0.5) 0%,rgba(0,0,0,0.5) 100%);  
    opacity: 1;
    filter: alpha(opacity=1);       
}  

My JS

$(function() {

    //Store frequently elements in variables
    var slider  = $('#slider'),
        tooltip = $('.tooltip');

    //Hide the tooltip at first
    tooltip.hide();

    //Call the Slider
    slider.slider({
        //Config
        //range: "min",
        min: -100,
        max: +100,
        value: 0,

        start: function(event,ui) {
            tooltip.fadeIn('fast');
        },

        //Slider Event
        slide: function(event, ui) { //When the slider is sliding

            var value  = slider.slider('value'),
                volume = $('.volume');

            tooltip.css('left', value).text(ui.value);  //Adjust the tooltip accordingly
        },

        stop: function(event,ui) {
            tooltip.fadeOut('slow');
        },
    });

});

http://jsfiddle.net/NKTpT/2/

check it now.. I think its done.

changed:

init values acc to width %

EDIT: For Posterity in case the JSFiddle disapears

The below code is the JSFiddle solution provided by nsthethunderbolt which I have coppied in here.

HTML

    <section> <span class="tooltip"></span> 
        <div id="slider"></div>
        <div id="slider"></div>
    </section>

CSS

section {
    width: 700px;
    height: auto;
    margin: 0px auto 0;
    position: relative;
}
#slider {
    border-width: 1px;
    border-style: solid;
    border-color: #333 #333 #777 #333;
    border-radius: 25px;
    width: 400px;
    position: absolute;
    height: 13px;
    background-color: #8e8d8d;
    background: #85837A;
    box-shadow: inset 0 1px 5px 0px rgba(0, 0, 0, .5), 0 1px 0 0px rgba(250, 250, 250, .5);
    left: 20px;
}


.tooltip {
    border: 1px solid #333;
    border-radius: 3px;
    top:20px;
    position:absolute;
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.3);

    color: #e456ff;
    display: block;
    font: 10pt Tahoma, Arial, sans-serif;
    height: 20px;
    opacity: 1;

    text-align: center;
    width: 35px;
    z-index: 1031;
}

JS

$(function () {
    var initX=0,minX=50,width=400;
    //Store frequently elements in variables
    var slider = $('#slider'),
        tooltip = $('.tooltip');

    //Hide the tooltip at first
    //tooltip.hide();

    //Call the Slider
    slider.slider({
        //Config
        //range: "min",
        min: -50,
        max: +50,
        value: 0,

        start: function (event, ui) {
            tooltip.fadeIn('fast');
        },

        //Slider Event
        slide: function (event, ui) { //When the slider is sliding
            var value = slider.slider('value'),
                volume = $('.volume');
            tooltip.css('left', initX+(value*width)/100).text(ui.value); //Adjust the tooltip accordingly
        },

        stop: function (event, ui) {
          //  tooltip.fadeOut('slow');
        },
    });
    initX=slider.slider("value");
    var txt=initX;
   initX+=(minX*width)/100;
tooltip.css('left',initX).text(txt);
});