jquery - jqueryUI - スライド ハンドラの位置が間違っている..

Question

サンプル スライダーを動作させた後、ハンドラーをカスタムの高さにしました。しかし、上側は非表示になり、下側は移動します。

「ハンドラーのサイズを変更する正しい方法は何ですか?」

私のコード:

$(function() {
    $('#sample').slider({orientation:'vertical'});
});​

CSS:

.ui-slider {
    position: relative;
    height: 300px;
    width: 20px;
    line-height: 20px;
    border-radius: 2em;
    background: #CCC;
    margin-left:50px;
}
.ui-slider-handle.ui-state-default {
    display: block;
    cursor: move;
    height:100px;
    margin-left:4px;
    margin-top:0.2em;
    background: #333
}​

ここでjsfiddle