the handle is giving its position according to the page, not its parent, how do I get its left position from its parent?

http://jsfiddle.net/nicktheandroid/TWKJb/5/

Once you grab the handler and start to drag it, the handlers left starts off at 10px, it should start off at 0px, if I add 20px to the container padding, it pushes the track from the left an extra 20px, now when i first grab the handle it starts out开发者_如何学编程 at 30px..

So the handle is getting its left position from the very left of the page.. The handler should give its left position from its parent(track), not from the very left of the page..

Can someone tell me what I did wrong to make the handle give its LEFT position according to the page and not its parent? I've been messing with this for hours >:(

If you are testing in Chrome, as I just did, then it might be the reasonably commonly found issue Chrome seems to have with .position(), there is a plugin fix posted on the comments section on the documentation page by Ajaho. But it has been posted before on StackOverflow.

jQuery.fn.aPosition = function() {
    thisLeft = this.offset().left;
    thisTop = this.offset().top;
    thisParent = this.parent();

    parentLeft = thisParent.offset().left;
    parentTop = thisParent.offset().top;

    return {
        left: thisLeft-parentLeft,
        top: thisTop-parentTop
    };
};

On the demonstration, I also set position: relative; on the handle, as it needs to be relative to its parent.

Updated demo: http://jsfiddle.net/TWKJb/6/