I have been trying to explore about JQuery UI and I am trying the slider. The trouble I am having is that the slider button I created would either extend to the left or right which goes beyond the with of the slider.

I have tried to make my slider button a transparent image with larger with hoping that the size of the image background will do the trick but it still does not work.

I have also tried to put

margin-left: -59px;

On the id of the image slider but it is still leading me to the initial problem.

Here is the jsfiddle: http://jsfiddle.net/pY7ja/4/

If you will notice, the slider button would stop at the end on the slider area correctly but the button starts on the incorrect spot of the slider.

Thanks in advance for your help.