jQuery滑块，处理速度比背景快

Question

即时通讯使用jQuery ui滑块我遇到了问题

这是一张2条显示我的意思的图片：

正如您所看到的，手柄比背景快得多，我该如何修复，以便背景与手柄保持一致？

这是我的代码：

Javascript：

$( ".slider" ).slider({
    orientation: "horizontal",
    animate: 1,
    range: "min",
    min: 0,
    max: 100,
    value: 60,
    create: function( event, ui ) {
        var slider = $(this).find(".progress-bar").data("valuenow"); 
        $(this).slider("value", slider);
    },
    slide: function( event, ui ) {
        var test = $(this).find(".progress-bar");
        var splitter = $(this).find(".progress-bar").attr("class").split(' '); 
        if (ui.value < 30) { 
            $(test).removeClass(splitter[1]).addClass("progress-bar-danger");
        }
        else if (ui.value > 30 && ui.value < 60) { 
            $(test).removeClass(splitter[1]).addClass("progress-bar-warning");
        }
        else { 
            $(test).removeClass(splitter[1]).addClass("progress-bar-success");
        }
        $(test).css("width", ui.value + '%');
    }
});

HTML：

<div class="progress slider"><div class="progress-bar progress-bar-success" role="progressbar" data-valuenow="60" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div></div>

忘记提及我使用bootstrap作为进度条