jquery - jQuery UI 滑块向前迈进了一步

Question

我对 jQuery UI 有疑问
这里是示例： http: //jsfiddle.net/zFsZV/7/ 当您移动滑块时，黑色的“进度条”移动完全相同（它们具有相同的宽度），但是当您向后移动滑块时，黑色 div 向前迈进了一步。有没有可能以某种方式修复它？我想像滑块一样在同一级别上有黑色 div

Answer 1

我能看到如何让它工作的唯一方法是在javascript中设置一个超时，它根据.ui-slider-range宽度更新位置。

看看这个小提琴。

$(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());
}

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