jquery滑块手柄不平滑并被阻挡

Question

我的jquery ui-slider在chrome中没有顺畅滑动:(虽然在Firefox中没有问题... jQuery版本是1.7.2自定义

当我抓住手柄时，它有时滑动得很好，有时它会卡住，虽然你松开了鼠标按钮，它仍然左右移动，直到你再次点击......

我注意到的事情是当我的手柄尺寸很小（小于cca 40x40）时我没有问题......

我的HTML：

<div id="slider_wrapper">           
            <div id="left_value">
                <span class="percent">70%</span>
                <span class="value">0.9</span>
                <span class="euro">&#8364;</span>
            </div>
            <div id="slider"></div>
            <div id="right_value">
                <span class="percent">1000%</span>
                <span class="value">20.00</span>
                <span class="euro">&#8364;</span>
            </div>
            <input type="hidden" name="slider_value" id="slider_value" value="-1" />
</div>

我突兀的.js：

<script>
            var left_value = 1;
            var right_value = 100;
            var absolute_value = 20;

            $(function() {
                $( "#slider" ).slider({
                    step:1,
                    min: 1,
                    max: 100,
                    value:absolute_value,
                    animation:false,
                    slide: function( event, ui ) {

                        absolute_value = sliderAbsoluteValue(ui.value);

                        $(".ui-slider-handle span.absolute").text(absolute_value);
                        $("#slider_value").val(absolute_value);

                    }
                });


                //$( "#left_value" ).text( $( "#slider" ).slider( "value" ) );
            $( ".ui-slider-handle" ).html("<span class=\"upper\">83%</span><span class=\"absolute\">"+absolute_value+"</span><span class=\"lower\">kW</span>");

        });
        </script>

我的CSS：

#slider_wrapper{
position:relative;
height:105px;
margin-top:20px;
}
#slider_wrapper #left_value, #slider_wrapper #right_value{
position:absolute;
height:37px;
width:45px;
}
#slider_wrapper #left_value{
top:-17px;
left:-5px;  
 }

#slider_wrapper #right_value{
top:-17px;
right:0px;
}

#slider_wrapper #left_value span, #slider_wrapper #right_value span{
display:block;
text-align:center;
font: normal 11px/1em arial,sans-serif;
}
#slider_wrapper #left_value span.value, #slider_wrapper #right_value span.value{
font: bold 15px/1em arial,sans-serif;
}

#newAlertForm #slider, #newAlertForm #slider-2{
width:450px;
height:4px;
background:#858A8E;
margin:12px auto 50px 46px;

}
#newAlertForm .ui-slider-horizontal .ui-slider-handle{ 
top:10px;
margin-left: -2.6em;
width:80px;
height:70px;
padding:16px 0 0 0;
outline:none;
color:#fff;
border:none;
cursor:pointer;
background: transparent url("../../imagenes/myEnergy/timers_sprites.png") no-repeat -8px -286px 
}
.ui-slider-handle span{
display: block;
width: 100%;
margin:0;
line-height:16px;
text-align: center; 
}

.ui-slider-handle span.upper, .ui-slider-handle span.lower{
font-size:10px; 
}

#newAlertForm .ui-slider-horizontal .ui-slider-handle:hover { 
background-position: -8px -286px; 
}

#slider_wrapper{ position:relative; height:105px; margin-top:20px; } #slider_wrapper #left_value, #slider_wrapper #right_value{ position:absolute; height:37px; width:45px; } #slider_wrapper #left_value{ top:-17px; left:-5px; } #slider_wrapper #right_value{ top:-17px; right:0px; } #slider_wrapper #left_value span, #slider_wrapper #right_value span{ display:block; text-align:center; font: normal 11px/1em arial,sans-serif; } #slider_wrapper #left_value span.value, #slider_wrapper #right_value span.value{ font: bold 15px/1em arial,sans-serif; } #newAlertForm #slider, #newAlertForm #slider-2{ width:450px; height:4px; background:#858A8E; margin:12px auto 50px 46px; } #newAlertForm .ui-slider-horizontal .ui-slider-handle{ top:10px; margin-left: -2.6em; width:80px; height:70px; padding:16px 0 0 0; outline:none; color:#fff; border:none; cursor:pointer; background: transparent url("../../imagenes/myEnergy/timers_sprites.png") no-repeat -8px -286px } .ui-slider-handle span{ display: block; width: 100%; margin:0; line-height:16px; text-align: center; } .ui-slider-handle span.upper, .ui-slider-handle span.lower{ font-size:10px; } #newAlertForm .ui-slider-horizontal .ui-slider-handle:hover { background-position: -8px -286px; }