Make slider steps specific values

Question

I have a slider which has min 1 , max 24 and steps of 1 . Is it possible I can make the steps as 1, 2, 3, 4, 12, 18, 24 ? That's all the values that will be shown when the slider changes left or right.

<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 has knockout.js binding.

If needed then I am adding the slider binding here

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

I think you just want to have a function that takes the raw slider value and translates it to your custom values. Then use the result of that wherever you need the value.

 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>