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

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

jQuery UI Slider上的磁边

1 个答案: