Changing when ngModel and ngModelRange get updated

[venturocket]

Changing when ngModel and ngModelRange get updated

[DrCool]

I'd like to second this request. What I suggest is a new attribute such as:

<slider on-end="MyFunction()">

I have a function that runs an AJAX call when the slider is used but I don't want the AJAX call running 20 times while the user is sliding. I only want it to run once when the user finishes sliding. If you could add an event attribute for this, we could run our code at the end of the event to process the ng-model value.

Thanks!

[bjodasso]

I agree this would be a good addition, maybe give it a wait-time attribute that will say if nothing else changes for a certain amount of milliseconds, go ahead and perform an action.

One possible thing you could do for now is watch your models you assigned and set a timeout to only execute if changes don't occur for a certain amount of time.

[DrCool]

This should be an easy addition. The author already has an "onEnd()" event in the code. He just needs to include a couple lines of code to check if the "on-end" attribute exists, and if so, just run the attached function. The onEnd() event only runs when the user has lifted their finger from the slider (on a touch device) or has released the mouse button.

[systemride]

(bump)

Just came here to say this would be a great addition as well.

[radiophysicist]

It is rather easy to achieve this without code modification. venturocket-angular-slider uses ngTouch for support both mouse/touchscreen so its $swipe service could be used as follows:

$timeout(function() {
  $swipe.bind($('.input.low',iElement),{
    //Scroll end event handler. See docs here: https://docs.angularjs.org/api/ngTouch/service/$swipe
    end: function(event) {
      //do something useful here
    },
  }) //$swipe.bind;
});

[systemride]

Another way to do it for now, similar to what @bjodasso said - watch the model:

$scope.$watch("myModel", function(newVal, oldVal) {
    if (newVal != oldVal) {
        // do something
    }
 });

[LiamK]

I was successful using the code from radiophysicist -- although I had to remove the iElement argument. I'm not sure how that was supposed to work. Can someone explain it?
The jQuery class selector $('.input.low') works.

I was not successful using the method systemride describes. The newVal and oldVal were always different, so it always executed that "do something" code.

Thanks!

[radiophysicist]

What about how it works, see docs here: https://docs.angularjs.org/api/ngTouch/service/$swipe
The code was taken from my custom directive controller so iElement was a reference to directive element. You could rewrite the selector as you need.

Also there are ngSwipeLeft and ngSwipeRight directives in the ngTouch module, it is probably possible to use them without messing with $swipe at all.

[radiophysicist]

In addition it is worth to stop event propagation and to handle the case when swipe ends outside the widget. The code now may look as follows:

$timeout(function() {
  //See docs here: https://docs.angularjs.org/api/ngTouch/service/$swipe
  $swipe.bind(element),{
    //Swipe start event handler
    start: function(coords,event) {
      //Prevent event propagation to parent elements
      event.stopPropagation();
    },
    //Swipe end event
    end: function() {
        //Do something useful with final value here
    },
    //Swipe cancel event (for example, drag finished outside the widget)
    cancel: function() {
        //Reset ngModel value of widget to initial value here
    }
  }) //$swipe.bind;
});

[rycastaneda]

How do you get the element in the $swipe.bind() function without depending on jquery?

[dasblitz]

To be able to specify a callback function in the same way as a translateFn:

Change the scope definition at 437 to:

scope: {
                floor               : '@',   // the minimum possible value
                ceiling             : '@',   // the maximum possible value
                step                : '@',   // how wide is each step, omit or set to 0 for no steps
                stepWidth           : '@',   // alias of step to avoid collisions
                precision           : '@',   // how many decimal places do we care about
                buffer              : '@',   // how close can the two knobs of a dual knob slider get?
                stickiness          : '@',   // how sticky should the knobs feel...seriously, how did this get all sticky? gross
                showSteps           : '@',   // show the step value bubbles?
                ngModel             : '=',   // single knob/dual know low value binding
                ngModelRange        : '=',   // dual knob high value binding
                ngDisabled          : '=',   // should the slider be disabled?
                ngChange            : '&',   // what should we do when a value is changed
                translateFn         : '&',   // how to translate the values displayed in the bubbles
                translateRangeFn    : '&',   // how to translate the range bubble
                translateCombinedFn : '&',   // how to translate the combined bubble 
                scaleFn             : '&',   // how to scale the values
                inverseScaleFn      : '&',   // how to unscale the values
                callbackFn          : '&'
            },

add after line 573:

// set up the callback function
if (attributes.callbackFn) {
    attributes.$set('callbackFn', "" + attributes.callbackFn + "(value)");
}

Change onEnd() function at line1388 to:

function onEnd() {
         // reset the offsets
        stickyOffsetLow = 0;
        stickyOffsetHigh = 0;

        if (pointer) {
            // if we have a pointer reference

            // update all the elements in the DOM
             setPointers();
             adjustBubbles();

             // the pointer is no longer active
             pointer.removeClass('active');
         }

         if (typeof scope.callbackFn === "function") {
              scope.callbackFn();
              scope.$apply();   
         }

        // reset the references
        pointer = null;
        ref = null;
        dragRange = false;
}

[drgould]

I finally have a chance to revisit (and completely rewrite) the slider. My plan is to add in onEnd and onStart. Any other event hooks I should add?

[dnlmzw]

Sorry - did anything ever happen regarding this issue?

[LiamK]

Yeah, what happened with this?