jQuery UI Slider 上的磁性边缘

Question

我在一个项目中使用 jQuery UI 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% 以内，则应视为已在限制范围内。但是，有一个视觉问题，因为当我移动另一个手柄时，滑块只是更新（即先前更新的手柄达到极限）。如何在用户移动手柄时实现假装效果？

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。如果句柄已经在区间内，用户仍然可以在视觉上移动它们，但如果句柄仍在区间内，它们会返回到边缘。

我希望这可以帮助其他人。我没有实现视觉反馈（保持手柄不动，直到超出间隔），但它似乎工作正常。