fix(ticks): Ensure model value is current when custom translate function runs for tick values

Ensure translate function behaves the same for keyboard commands and drag events as mouse clicks by
ensuring the model is applied before updateHandles is called.

Author: trodi

src/rzslider.js

@@ -2058,7 +2058,7 @@
         this.applyLowValue();
         if (this.range)
           this.applyHighValue();
-        this.applyModel();
+        this.applyModel(true);
         this.updateHandles('lowValue', this.valueToPosition(newMinValue));
         this.updateHandles('highValue', this.valueToPosition(newMaxValue));
       },
@@ -2070,7 +2070,6 @@
        */
       positionTrackingHandle: function(newValue) {
         var valueChanged = false;
-
         newValue = this.applyMinMaxLimit(newValue);
         if (this.range) {
           if (this.options.pushRange) {
@@ -2089,6 +2088,7 @@
             if (this.tracking === 'lowValue' && newValue > this.highValue) {
               this.lowValue = this.highValue;
               this.applyLowValue();
+              this.applyModel();
               this.updateHandles(this.tracking, this.maxH.rzsp);
               this.updateAriaAttributes();
               this.tracking = 'highValue';
@@ -2101,6 +2101,7 @@
             else if (this.tracking === 'highValue' && newValue < this.lowValue) {
               this.highValue = this.lowValue;
               this.applyHighValue();
+              this.applyModel();
               this.updateHandles(this.tracking, this.minH.rzsp);
               this.updateAriaAttributes();
               this.tracking = 'lowValue';
@@ -2119,13 +2120,14 @@
             this.applyLowValue();
           else
             this.applyHighValue();
+          this.applyModel();
           this.updateHandles(this.tracking, this.valueToPosition(newValue));
           this.updateAriaAttributes();
           valueChanged = true;
         }
 
         if (valueChanged)
-          this.applyModel();
+          this.applyModel(true);
       },
 
       applyMinMaxLimit: function(newValue) {
@@ -2199,10 +2201,10 @@
        * Apply the model values using scope.$apply.
        * We wrap it with the internalChange flag to avoid the watchers to be called
        */
-      applyModel: function() {
+      applyModel: function(callOnChange) {
         this.internalChange = true;
         this.scope.$apply();
-        this.callOnChange();
+        callOnChange && this.callOnChange();
         this.internalChange = false;
       },
 

tests/specs/helper-functions-test.js

@@ -705,7 +705,15 @@
         expect(helper.slider.positionToValue(1000)).to.equal(-100);
         expect(helper.slider.positionToValue(500)).to.equal(-50);
       });
+      it('should conditionally call callOnChange in applyModel', function() {
+        sinon.spy(helper.slider, 'callOnChange');
+
+        helper.slider.applyModel(false);
+        helper.slider.callOnChange.called.should.be.false;
+
+        helper.slider.applyModel(true);
+        expect(helper.slider.callOnChange.callCount).to.equal(1);
+      });
     });
   });
 }());
-