Knockout noUiSlider custom binding fluency

Question

I use knockout to binding noUiSlider with input valueMax and valueMin. After change slider is update input, but this don't work fluently. I would like to immaditelly see value of slider in input .

I have code

HTML

<div class="col-xs-12">
  <div class="row">
    <div class="slider" data-bind="noUiSliderPrice: {minValue: min, maxValue: max}">
    </div>
  </div>
  <div class="row">
    <div class="pull-left">
      <input data-bind="textInput: min" />
    </div>
    <div class="pull-right">
      <input  data-bind="textInput:  max" />
    </div>
  </div>
</div>

JS

ko.bindingHandlers.noUiSliderPrice = {
  init: function(element, valueAccessor, allBindingsAccesor, viewModel, bindingContext) {
    var params = valueAccessor();
    noUiSlider.create(element, {
      start: [1, 10000000],
      range: {
        'min': 1,
        'max': 1000000
      },
      connect: true,
      step: 1,
    });
    element.noUiSlider.on('slide', function(values, handle) {
      var value = values[handle];
      if (handle) {
        params.maxValue(value);

      } else {
        params.minValue(value);
      }
    });
  },
  update: function(element, valueAccessor, allBindingsAccesor, viewModel, bindingContext) {
    var params = valueAccessor();
    var range = [params.minValue(), params.maxValue()];
    element.noUiSlider.set(range);
  }
};
var model = function() {
  var self = this;

  self.min = ko.observable().extend({
    throttle: 100
  });
  //with extend input has latency
  self.max = ko.observable();
  //without extend input don't work fluently
};

ko.applyBindings(new model());

fiddle

B. Darren Olson B. Darren Olson · Accepted Answer · 2016-07-22T21:19:29

So the update method on the custom binding is quite heavy. Handling the update in the init using the model(var model = viewModel;) directly instead of the valueAccessor will improve the ui input lag you were experiencing.

Knockout noUiSlider custom binding fluency

1 Answers