only update model onEnd.

[nissaw]

Steps to reproduce

1. drag slider around and it lags on a page with many other watchers
2. call to $apply on each change event
3. possible to update model only onEnd event?

Expected @behaviour

Tell us what should happen Slider handle should keep up with dragging

Actual behaviour

Tell us what happens instead slider Handle lags behind #cursor

[nissaw]

...or something similar to debounce

[ValentinH]

Could you please share you slider options?

[nissaw]

$scope.scoreSlider = {
  options: {
    floor: 0,
    ceil: 99,
    hideLimitLabels: true,
    showTicks: 30,
    getLegend: function (value) {
      var ticks = [0, 30, 60, 90];
      if (ticks.includes(value)) {
        return '> ' + value;
      } else {
        return null;
      }
    }
  }
};

[ValentinH]

Do you have watchers on the score value?

[nissaw]

One {{:scoreThreshold}} in another div shown when the slider is hidden

[ValentinH]

Have you try commenting the $scope.$apply in the library to see if it was really the reason of the slowdown?

[nissaw]

added a ng-show fn call (for debugging purposes) to the rz-slider directive and it was getting called 30+ times on a slide

[ValentinH]

We could add an option to call applyModel on onEnd only. Would you like to submit a PR for this?

[Battleaxe19]

Has anybody figured out a workaround for this yet? My slider values are being used to filter an ng-repeat and the filter ie being called for every single tick the slider makes while sliding.

[ValentinH]

Unfortunately the option is not available yet. I don't know if I'll add it one day... If you want you can provide a PR for it if you really need it. ;)

[marc1404]

@Battleaxe19 It is not the most elegant solution but you can do something like this:

    constructor($scope) {
        const updateValue = debounce(value => {
            $scope.$apply(() => this.debouncedValue = value);
        }, 100);

        this.debouncedValue = 100;
        this.value = 100;
        this.options = {
            floor: 1,
            ceil: 100,
            showSelectionBar: true,
            translate(value, sliderId, label) {
                if (label === 'model') {
                    return '<strong>max. ' + value + ' €</strong>';
                }

                return value + ' €';
            },
            onChange(sliderId, modelValue) {
                updateValue(modelValue);
            }
        };
    }

@ValentinH Thanks for the awesome slider btw :)

[bendem]

I'm not sure why you'd use onChange if the behavior you want is the one provided by onEnd.