Implement a on-start and on-end callback as requested in #121 and #86.

Author: Valentin Hervieu

README.md

@@ -114,10 +114,18 @@ $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-start**
+
+> Function to be called when a slider update is started.
+
 **rz-slider-on-change**
 
 > Function to be called when rz-slider-model or rz-slider-high change.
 
+**rz-slider-on-end**
+
+> Function to be called when a slider update is ended.
+
 ```javascript
 // In your controller
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angularjs-slider",
-  "version": "0.1.28",
+  "version": "0.1.29",
   "homepage": "https://github.com/rzajac/angularjs-slider",
   "authors": [
     "Rafal Zajac <[email protected]>",

demo/index.html

@@ -29,7 +29,9 @@ <h2>Min/max slider example</h2>
                 rz-slider-step="0.3"
                 rz-slider-precision="1"
                 rz-slider-model="slider_data.value"
-                rz-slider-on-change="onChange()"></rzslider>
+                rz-slider-on-start="onStart()"
+                rz-slider-on-change="onChange()"
+                rz-slider-on-end="onEnd()"></rzslider>
     </article>
 
     <article>
@@ -142,11 +144,19 @@ <h2>Toggle slider example</h2>
         $scope.slider_data = {value: 1};
         $scope.otherData = {value: 10};
 
+        $scope.onStart = function() {
+            console.info('started', $scope.slider_data.value);
+        };
+
         $scope.onChange = function() {
             console.info('changed', $scope.slider_data.value);
             $scope.otherData.value = $scope.slider_data.value * 10;
         };
 
+        $scope.onEnd = function() {
+            console.info('ended', $scope.slider_data.value);
+        };
+
         $scope.visible = false;
 
         $scope.toggle = function() {
@@ -157,7 +167,7 @@ <h2>Toggle slider example</h2>
         };
 
         $scope.toggleSlider = {
-            value: 0,
+            value: 1,
             ceil: 500,
             floor: 0
         };

dist/rzslider.min.css

@@ -1,6 +1,6 @@
 {
   "name": "jusas-angularjs-slider",
-  "version": "0.1.28",
+  "version": "0.1.29",
   "description": "AngularJS slider directive with no external dependencies. Mobile friendly!.",
   "main": "rzslider.js",
   "repository": {

dist/rzslider.min.js

@@ -4,7 +4,7 @@
  * (c) Rafal Zajac <[email protected]>
  * http://github.com/rzajac/angularjs-slider
  *
- * Version: v0.1.28
+ * Version: v0.1.29
  *
  * Licensed under the MIT license
  */
@@ -589,6 +589,20 @@ function throttle(func, wait, options) {
       this.getWidth(this.flrLab);
     },
 
+    /**
+     * Call the onStart callback if defined
+     *
+     * @returns {undefined}
+     */
+    callOnStart: function() {
+      if(this.scope.rzSliderOnStart) {
+        var self = this;
+        $timeout(function() {
+            self.scope.rzSliderOnStart();
+        });
+      }
+    },
+
     /**
      * Call the onChange callback if defined
      *
@@ -603,6 +617,20 @@ function throttle(func, wait, options) {
       }
     },
 
+    /**
+     * Call the onEnd callback if defined
+     *
+     * @returns {undefined}
+     */
+    callOnEnd: function() {
+      if(this.scope.rzSliderOnEnd) {
+        var self = this;
+        $timeout(function() {
+            self.scope.rzSliderOnEnd();
+        });
+      }
+    },
+
     /**
      * Update slider handles and label positions
      *
@@ -991,6 +1019,7 @@ function throttle(func, wait, options) {
 
       $document.on(eventNames.moveEvent, ehMove);
       $document.one(eventNames.endEvent, ehEnd);
+      this.callOnStart();
     },
 
     /**
@@ -1182,6 +1211,7 @@ function throttle(func, wait, options) {
       this.tracking = '';
 
       this.dragging.active = false;
+      this.callOnEnd();
     },
 
     /**
@@ -1231,7 +1261,9 @@ function throttle(func, wait, options) {
       rzSliderHideLimitLabels: '=?',
       rzSliderAlwaysShowBar: '=?',
       rzSliderPresentOnly: '@',
-      rzSliderOnChange: '&'
+      rzSliderOnStart: '&',
+      rzSliderOnChange: '&',
+      rzSliderOnEnd: '&'
     },
 
     /**