Add a rzSliderOnChange attribute. <rzslider rz-slider-model="priceSlider" rz-slider-on-change="onSliderChange()"></rzslider>

Author: Valentin Hervieu

README.md

@@ -106,6 +106,10 @@ $scope.priceSlider = {
 
 > Custom translate function. Use this if you want to translate values displayed on the slider. For example if you want to display dollar amounts instead of just numbers do this:
 
+**rz-slider-on-change**
+
+> Function to be called when rz-slider-model or rz-slider-high change.
+
 ```javascript
 // In your controller
 
@@ -128,7 +132,8 @@ $scope.translate = function(value)
     rz-slider-ceil="priceSlider.ceil"
     rz-slider-model="priceSlider.min"
     rz-slider-high="priceSlider.max"
-    rz-slider-translate="translate"></rzslider>
+    rz-slider-translate="translate"
+    rz-slider-on-change="onSliderChange()"></rzslider>
 ```
 
 ## Slider events

rzslider.js

@@ -560,6 +560,17 @@ function throttle(func, wait, options) {
       this.getWidth(this.flrLab);
     },
 
+    /**
+     * Call the onChange callback if defined
+     *
+     * @returns {undefined}
+     */
+    callOnChange: function() {
+      if(this.scope.rzSliderOnChange) {
+        this.scope.rzSliderOnChange();
+      }
+    },
+
     /**
      * Update slider handles and label positions
      *
@@ -568,6 +579,7 @@ function throttle(func, wait, options) {
      */
     updateHandles: function(which, newOffset)
     {
+      this.callOnChange();
       if(which === 'rzSliderModel')
       {
         this.updateLowHandle(newOffset);
@@ -1033,7 +1045,8 @@ function throttle(func, wait, options) {
       rzSliderTranslate: '&',
       rzSliderHideLimitLabels: '=?',
       rzSliderAlwaysShowBar: '=?',
-      rzSliderPresentOnly: '@'
+      rzSliderPresentOnly: '@',
+      rzSliderOnChange: '&'
     },
 
     /**