javascript - 水平スライダーの外に出るスライダー ハンドル

Question

ハンドルをスライダーのある場所に動かそうとしていますが、スライダーの外に出ています。ここに jsfiddle があります: http://jsfiddle.net/endl3ss/gk7fu/3/

CSS

body {
    text-align: centre;
 }

.ui-slider-handle, .ui-state-hover, .ui-state-default{
    height: 17px !important;
    width: 20px;
    background: none !important;
    border-radius: 0;
    top: 0 !important;  
    border:0 !important;
    outline: 3px solid black !important;
}

.ui-slider-horizontal {
    height: 17px !important;
    width: 200px !important;

}

HTML

<div class="slider"></div>