Question

I’m having a hard time on finding the right computation and logic to my slider.
Please see my slider here: http://jsfiddle.net/MyNameIsCode/p6UVt/1/
Everything seems fine at first, but if you try to change the width value of .item-slider-contents to 1000px or more, the cache.nub doesn’t slide the .item-slider-contents properly. I hope you get what I mean to say. Please help me to compute this properly.
The width of .item-slider-contents will expand on real time.

Answer 1

I got it. I just have to add this is css:

div { box-sizing : border-box; position:relative; }  

And this one should be:

.slider-road{
margin-top:20px;
height:10px;
width:690px;    
border:1px solid orange;    
}

And this is the formula:

var pct = (cache.nub.position().left - 2) / (cache.slider.width() - 16)  

And whenever I change the width of .item-slider-contents it slides end to end properly.

Here is the updated link for reference:

http://jsfiddle.net/MyNameIsCode/p6UVt/3/