jQueryUI滑块向前迈出了一步

我对jQuery UI有问题
下面是一个例子： 移动滑块时，黑色“进度条”移动完全相同（它们具有相同的宽度），但向后移动滑块时，黑色div向前移动一步。

---

有可能以某种方式修复它吗？我想让black div与slider一样位于同一级别上。我能看到如何使其工作的唯一方法是在javascript中设置一个超时，它根据

.ui滑块范围
宽度更新位置


通过检查您可以在
幻灯片
事件中访问的ui对象，元素的位置似乎总是在事件发生后设置的，这意味着您实际上无法直接设置正确的宽度/左位置。但是，如果您看一下我的示例，设置超时意味着设置了正确的位置

$(document).ready(function() {

    $('#slider').slider({
        range: "min",
        value: 1,
        min: 1,
        max: 10,
        step: 1,
        slide: function(event, ui){   
            console.log(ui);
            console.log(ui.handle.attributes[2].value);
            setTimeout(setPosition, 10);            
        }
    })
    $('#slider').slider('value');

});
function setPosition(){
    $('.color').css('width', $('.ui-slider-range').width());
}