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

改编自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。

Answer 2

您可以通过覆盖我在评论中记下的_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/

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

2 个答案: