3

数値テキストボックスにリンクされているjqueryuiスライダーがあります。スライダーには最大値と最小値があります。

ノックアウトjsの実装については、テキストボックス入力を使用したuiスライダーまたは jqueryuiスライダーを使用したノックアウトjsの使用を参照してください。

私の質問は、スライダーの値を最大値より上または最小値より下に設定することは可能ですか？

が範囲外の場合valueは、範囲の最大値または最小値に設定されます。

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

たとえば、スライダーが月給の50から100までのパーセンテージを表すとします。月給は10000に設定されます。スライダーをスライドすると、5000から10000まで変化しますが、それでもユーザーが値を入力できるようにしたいです。範囲外です。したがって、ユーザーが12000を入力すると、スライダーは最大にスライドし、ユーザーが2000を入力すると、スライダーは最小にスライドします。

4

2 に答える 2

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/

于 2013-03-07T13:25:36.730 に答える
1

ノックアウト js と jquery ui スライダーの使用の回答から適応

<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を適応させました。

于 2013-03-07T12:45:20.200 に答える