jquery-ui - 允许将 jquery ui slider 设置为高于最大值或低于最小值

Question

我有一个链接到数字文本框的 jquery ui slider 。 slider 具有最大值和最小值。

参见 ui slider with text box input或者 Using knockout js with jquery ui sliders用于 knockout js 实现。

我的问题是:是否可以将 slider 的值设置为高于最大值或低于最小值？

如果 value 超出范围，则将其设置为范围的最大值或最小值:

$(element).slider("value", value);

例如，假设 slider 代表你的月薪百分比在 50 到 100 之间。月薪设置为 10000。如果你滑动 slider ，它会在 5000 到 10000 之间变化，但我仍然希望用户能够输入超出范围的值。因此，如果用户输入 12000， slider 将滑动到最大值，如果用户输入 2000， slider 将滑动到最小值。

Answer 1

您可以通过覆盖我在评论中提到的 _trimAlignValue 函数来完成此操作:

$.ui.slider.prototype._trimAlignValue = function (val) {
    var step = (this.options.step > 0) ? this.options.step : 1,
        valModStep = val % step,
        alignValue = val - valModStep;

    if (Math.abs(valModStep) * 2 >= step) {
        alignValue += (valModStep > 0) ? step : (-step);
    }
    return parseFloat(alignValue.toFixed(5));
};

这将影响页面上的每个 slider ——如果这不是您想要的效果，您应该将此功能包装在您自己的插件中(如果需要，我也可以提供一个这样做的示例)。

这与您现有的 KnockoutJS 自定义绑定(bind)相结合似乎效果很好。

示例: http://jsfiddle.net/Aa5nK/7/