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

Question

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

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

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

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

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

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

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

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

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

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

Answer 2

改编自Using knockout js with jquery ui sliders中的答案

<h2>Slider Demo</h2>
Savings:
<input data-bind="value: savings, valueUpdate: 'afterkeydown'"
/>
<div style="margin: 10px" data-bind="slider: savings, sliderOptions: {min: 0, max: 100, range: 'min', step: 1}"></div>

这是自定义绑定：

ko.bindingHandlers.slider = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var options = allBindingsAccessor().sliderOptions || {};
        $(element).slider(options);
        ko.utils.registerEventHandler(element, "slidechange", function (event, ui) {
            var value = valueAccessor();
            if(!(value < $(element).slider('option', 'min')   || value > $(element).slider('option', 'max')))
            {
            valueAccessor(ui.value);
            }
        });
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).slider("destroy");
        });
        ko.utils.registerEventHandler(element, "slide", function (event, ui) {
            var observable = valueAccessor();
            observable(ui.value);
        });
    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        if (isNaN(value)) value = 0;
        if (value < $(element).slider('option', 'min')) {
            value = $(element).slider("option", "min");
        } else if (value > $(element).slider('option', 'max')) {
            value = $(element).slider("option", "max");
        }
        $(element).slider("value", value);

    }
};


var ViewModel = function () {
    var self = this;

    self.savings = ko.observable(10);
    self.spent = ko.observable(5);
    self.net = ko.computed(function () {
        return self.savings() - self.spent();
    });
};

ko.applyBindings(new ViewModel());

我也从那个答案中改编了jsFiddle。