Question

我有一个最小1，最大24和1步的滑块。我可以将步骤设为1, 2, 3, 4, 12, 18, 24吗？这是滑块向左或向右变化时显示的所有值。

<input id="ex1" data-slider-id="ex1Slider" type="text" data-bind="sliderValue: {value: loanperiod, min:0, max: 24, step: 1, formatter:formatter1}, event: { change: $root.getInvestmentDetailsForBorrower }, valueUpdate: 'afterkeydown' " style="display: none;">

Slider有knockout.js绑定。

如果需要，那么我在这里添加滑块绑定

// Custom binding for slider value
    (function ($) {

        ko.bindingHandlers.sliderValue = {
            init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var params = valueAccessor();

        // Check whether the value observable is either placed directly or in the paramaters object.
        if (!(ko.isObservable(params) || params['value']))
            throw "You need to define an observable value for the sliderValue. Either pass the observable directly or as the 'value' field in the parameters.";

        // Identify the value and initialize the slider
        var valueObservable;
        if (ko.isObservable(params)) {
            valueObservable = params;
            $(element).slider({value: ko.unwrap(params)});
        }
        else {
            valueObservable = params['value'];
            if (!Array.isArray(valueObservable)) {
                // Replace the 'value' field in the options object with the actual value
                params['value'] = ko.unwrap(valueObservable);
                $(element).slider(params);
            }
            else {
                valueObservable = [params['value'][0], params['value'][1]];
                params['value'][0] = ko.unwrap(valueObservable[0]);
                params['value'][1] = ko.unwrap(valueObservable[1]);
                $(element).slider(params);
            }
        }

        // Make sure we update the observable when changing the slider value
        $(element).on('slide', function (ev) {
            if (!Array.isArray(valueObservable)) {
                valueObservable(ev.value);
            }
            else {
                valueObservable[0](ev.value[0]);
                valueObservable[1](ev.value[1]);
            }
        }).on('change', function (ev) {
            if (!Array.isArray(valueObservable)) {
                valueObservable(ev.value.newValue)
            }
            else {
                valueObservable[0](ev.value.newValue[0]);
                valueObservable[1](ev.value.newValue[1]);
            }
        });

        // Clean up
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $(element).slider('destroy');
            $(element).off('slide');
        });

            },
            update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var modelValue = valueAccessor();
        var valueObservable;
        if (ko.isObservable(modelValue))
            valueObservable = modelValue;
        else
            valueObservable = modelValue['value'];

        if (!Array.isArray(valueObservable)) {
            $(element).slider('setValue', parseFloat(valueObservable()));
        }
        else {
            $(element).slider('setValue', [parseFloat(valueObservable[0]()),parseFloat(valueObservable[1]())]);
        }
            }
        };

    })(jQuery);

    // Custom binding for slider
    (function ($) {

        ko.bindingHandlers.slider = {
            init: function (element, valueAccessor, allBindingsAccessor) {
                  var options = allBindingsAccessor().sliderOptions || {};
                  $(element).slider(options);
                  ko.utils.registerEventHandler(element, "slidechange", function (event, ui) {
                          var observable = valueAccessor();
                          observable(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;
                  $(element).slider("value", value);

            }
        };

    })(jQuery);

Answer 1

我认为您只想拥有一个获取原始滑块值并将其转换为自定义值的函数。然后在需要值的地方使用结果。

＆＃13;

vm = {
  sliderValues: [1, 2, 3, 4, 12, 18, 24],
  rawSliderValue: ko.observable(1),
  sliderValue: ko.pureComputed(function() {
    return vm.sliderValues[vm.rawSliderValue() - 1];
  })
};

ko.applyBindings(vm);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input type="range" min="1" data-bind="attr {max: sliderValues.length}, value: rawSliderValue, valueUpdate: 'input'" />
<div data-bind="text: sliderValue"></div>

＆＃13;

使滑块步骤具体值

1 个答案: