使滑块步骤特定值

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

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

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

<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>