Сделать шаги ползунка конкретные значения

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

Слайдер имеет нокаут.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>