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

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

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

demo/index.html

@@ -29,7 +29,9 @@
                 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 @@
         $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 @@
         };
 
         $scope.toggleSlider = {
-            value: 0,
+            value: 1,
             ceil: 500,
             floor: 0
         };

dist/rzslider.min.css

-/*! jusas-angularjs-slider - v0.1.28 - (c) Rafal Zajac <rzajac@gmail.com>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2015-09-08 */
+/*! jusas-angularjs-slider - v0.1.29 - (c) Rafal Zajac <rzajac@gmail.com>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2015-09-09 */
 rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:30px 0 15px 0;vertical-align:middle}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider span.rz-base{width:100%;height:100%;padding:0}rzslider span.rz-bar-wrapper{left:0;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}rzslider span.rz-bar{left:0;z-index:0;width:100%;height:4px;background:#d8e0f3;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.rz-bar.rz-selection{z-index:1;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.rz-pointer{top:-14px;z-index:2;width:32px;height:32px;cursor:pointer;background-color:#0db9f0;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}rzslider span.rz-pointer:after{position:absolute;top:12px;left:12px;width:8px;height:8px;background:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}rzslider span.rz-pointer:hover:after{background-color:#fff}rzslider span.rz-pointer.rz-active:after{background-color:#451aff}rzslider span.rz-bubble{top:-32px;padding:1px 3px;color:#55637d;cursor:default}rzslider span.rz-bubble.rz-selection{top:16px}rzslider span.rz-bubble.rz-limit{color:#55637d}
\ No newline at end of file

package.json

 {
   "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": {

rzslider.js

@@ -4,7 +4,7 @@
  * (c) Rafal Zajac <rzajac@gmail.com>
  * 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: '&'
     },
 
     /**