javascript - jQuery UI slider 上的磁性边缘

Question

我在项目中使用 jQuery UI Slider 组件作为时态数据过滤器，具有两个句柄。由于比例非常大，有时用户很难将 handle 放在 slider 的极限处。这会对时间戳接近 slider 极限值的数据造成一些麻烦。

现在，如果值在某个区间内，我正尝试强制 slider 自动移动到边缘:

$('#slider-range').on( 'slide', function( event, ui ) {
    if( typeof ui !== 'undefined' ){

        // magnetic edges
        var magTrigger = 0.20;
        var values = $('#slider-range').slider('values');
        var min = $('#slider-range').slider('option', 'min');
        var max = $('#slider-range').slider('option', 'max');

        if(values[0] != min && values[0] - (values[0] * magTrigger) <= min) {
            $('#slider-range').slider('values', 0, min);
        }

        if(values[1] != max && values[1] + (values[1] * magTrigger) >= max) {
            $('#slider-range').slider('values', 1, max);
        }

        // typical update routines
    }
}

在这种情况下，如果一个句柄在相应限制的 20% 范围内，则应将其视为已处于限制范围内。但是，存在一个视觉问题，因为只有当我移动另一个 handle 时， slider 才会更新(即之前更新的 handle 达到极限)。如何在用户移动 handle 时实现假装效果？

Answer 1

经过一些研究，我认为我的主要问题是从错误的地方获取值并且没有使用合适的事件。我是这样解决的:

$('#slider-range').on( 'slidestop', function( event, ui ) {
    // magnetic edges
    var magTrigger = 0.10;  // 10% of interval
    var values = ui.values;
    var min = $('#slider-range').slider('option', 'min');
    var max = $('#slider-range').slider('option', 'max');
    var interval = max - min;
    var refresh = false;

    if(values[0] <= (min + interval * magTrigger)) {
        $('#slider-range').slider('values', 0, min);
        refresh = true;
    }

    if(values[1] >= (max - interval * magTrigger)) {
        $('#slider-range').slider('values', 1, max);
        refresh = true;
    }

    if(refresh) {
         // typical update routines
    }
});

实例:http://jsfiddle.net/nQgL8/

请注意，现在我从 ui 对象获取值并使用 slidestop 事件而不是 slide。如果 handle 已经位于间隔内，用户仍然可以视觉上移动它们，但如果 handle 仍在间隔内，它们将返回到边缘。

我希望这可以帮助别人。我没有实现视觉反馈(保持 handle 不可移动，直到超出间隔)，但它似乎工作正常。