Add a rz-slider-disabled attribute. Closes #117

README.md

@@ -146,6 +146,10 @@ $scope.priceSlider = {
 
 > Display a tick for each value and the value of the tick.
 
+**rz-slider-disabled**
+
+> Disable the slider (apply a special style and unbind events)
+
 ```javascript
 // In your controller
 

bower.json

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

demo/index.html

@@ -151,6 +151,15 @@
         </div>
     </article>
 
+    <article>
+        <h2>Disabled slider example</h2>
+        <label>Disable slider <input type="checkbox" ng-model="disableSlider"></label>
+        <rzslider rz-slider-model="priceSlider8"
+                  rz-slider-floor="0"
+                  rz-slider-ceil="10"
+                  rz-slider-disabled="disableSlider"></rzslider>
+    </article>
+
 </div>
 
 
@@ -176,6 +185,9 @@
       min: 2,
       max: 8
     };
+    $scope.priceSlider8 = 5;
+
+      $scope.disableSlider = true;
 
     $scope.translate = function(value) {
       return '$' + value;

dist/rzslider.css

@@ -18,6 +18,19 @@ rzslider {
   height: 4px;
   margin: 30px 0 15px 0;
   vertical-align: middle;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+rzslider[disabled] {
+  cursor: not-allowed;
+}
+
+rzslider[disabled] span.rz-pointer {
+  cursor: not-allowed;
+  background-color: #d8e0f3;
 }
 
 rzslider span {

dist/rzslider.js

@@ -4,7 +4,7 @@
  * (c) Rafal Zajac <rzajac@gmail.com>
  * http://github.com/rzajac/angularjs-slider
  *
- * Version: v0.1.34
+ * Version: v0.1.35
  *
  * Licensed under the MIT license
  */
@@ -225,6 +225,13 @@ function throttle(func, wait, options) {
      */
     this.showTicksValue = attributes.rzSliderShowTicksValue;
 
+    /**
+     * Disable the slider
+     *
+     * @type {boolean}
+     */
+    this.disabled = this.scope.rzSliderDisabled;
+
     /**
      * The delta between min and max value
      *
@@ -284,6 +291,8 @@ function throttle(func, wait, options) {
         self = this;
 
       this.initElemHandles();
+      this.addAccessibility();
+      this.setDisabledState();
       this.calcViewDimensions();
       this.setMinAndMax();
 
@@ -295,7 +304,7 @@ function throttle(func, wait, options) {
         self.updateCeilLab();
         self.updateFloorLab();
         self.initHandles();
-        if (!self.presentOnly) { self.bindEvents(); }
+        self.bindEvents();
       });
 
       // Recalculate slider view dimensions
@@ -384,13 +393,20 @@ function throttle(func, wait, options) {
       });
       this.deRegFuncs.push(unRegFn);
 
+      unRegFn = this.scope.$watch('rzSliderDisabled', function(newValue, oldValue)
+      {
+        if(newValue === oldValue) { return; }
+        self.resetSlider();
+        if(self.disabled)
+          self.unbindEvents();
+        else
+          self.bindEvents();
+      });
+      this.deRegFuncs.push(unRegFn);
+
       this.scope.$on('$destroy', function()
       {
-        self.minH.off();
-        self.maxH.off();
-        self.fullBar.off();
-        self.selBar.off();
-        self.ticks.off();
+        self.unbindEvents();
         angular.element($window).off('resize', calcDimFn);
         self.deRegFuncs.map(function(unbind) { unbind(); });
       });
@@ -406,9 +422,27 @@ function throttle(func, wait, options) {
       this.setMinAndMax();
       this.updateCeilLab();
       this.updateFloorLab();
+      this.setDisabledState();
       this.calcViewDimensions();
     },
 
+    /**
+     * Set the disabled state based on rzSliderDisabled
+     *
+     * @returns {undefined}
+     */
+    setDisabledState: function()
+    {
+      this.disabled = this.scope.rzSliderDisabled;
+      if(this.disabled) {
+        this.sliderElem.attr('disabled', 'disabled');
+      }
+      else {
+        this.sliderElem.attr('disabled', null);
+      }
+
+    },
+
     /**
      * Reset label values
      *
@@ -587,6 +621,18 @@ function throttle(func, wait, options) {
         this.selBar.addClass('rz-draggable');
       }
     },
+    
+    /**
+     * Adds accessibility atributes
+     *
+     * Run only once during initialization
+     *
+     * @returns {undefined}
+     */
+    addAccessibility: function ()
+    {
+      this.sliderElem.attr("role", "slider");
+    },
 
     /**
      * Calculate dimensions that are dependent on view port size
@@ -1031,6 +1077,7 @@ function throttle(func, wait, options) {
      */
     bindEvents: function()
     {
+      if(this.presentOnly || this.disabled) return;
       var barTracking, barStart, barMove;
 
       if (this.dragRange)
@@ -1065,6 +1112,20 @@ function throttle(func, wait, options) {
       this.ticks.on('touchstart', angular.bind(this, this.onMove, this.ticks));
     },
 
+    /**
+     * Unbind mouse and touch events to slider handles
+     *
+     * @returns {undefined}
+     */
+    unbindEvents: function()
+    {
+      this.minH.off();
+      this.maxH.off();
+      this.fullBar.off();
+      this.selBar.off();
+      this.ticks.off();
+    },
+
     /**
      * onStart event handler
      *
@@ -1350,7 +1411,8 @@ function throttle(func, wait, options) {
       rzSliderOnChange: '&',
       rzSliderOnEnd: '&',
       rzSliderShowTicks: '=?',
-      rzSliderShowTicksValue: '=?'
+      rzSliderShowTicksValue: '=?',
+      rzSliderDisabled: '=?',
     },
 
     /**

dist/rzslider.min.css

-/*! jusas-angularjs-slider - v0.1.34 - (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2015-10-03 */
-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;z-index:1;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}rzslider span.rz-bar{left:0;z-index:1;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:2;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.rz-pointer{top:-14px;z-index:3;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}rzslider .rz-ticks{position:absolute;top:-3px;left:0;z-index:1;display:flex;width:100%;padding:0 11px;margin:0;list-style:none;box-sizing:border-box;justify-content:space-between}rzslider .rz-ticks .tick{width:10px;height:10px;text-align:center;cursor:pointer;background:#d8e0f3;border-radius:50%}rzslider .rz-ticks .tick.selected{background:#0db9f0}rzslider .rz-ticks .tick .tick-value{position:absolute;top:-30px;transform:translate(-50%,0)}
+/*! jusas-angularjs-slider - v0.1.35 - (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2015-10-08 */
+rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:30px 0 15px 0;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}rzslider[disabled]{cursor:not-allowed}rzslider[disabled] span.rz-pointer{cursor:not-allowed;background-color:#d8e0f3}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;z-index:1;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}rzslider span.rz-bar{left:0;z-index:1;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:2;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.rz-pointer{top:-14px;z-index:3;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}rzslider .rz-ticks{position:absolute;top:-3px;left:0;z-index:1;display:flex;width:100%;padding:0 11px;margin:0;list-style:none;box-sizing:border-box;justify-content:space-between}rzslider .rz-ticks .tick{width:10px;height:10px;text-align:center;cursor:pointer;background:#d8e0f3;border-radius:50%}rzslider .rz-ticks .tick.selected{background:#0db9f0}rzslider .rz-ticks .tick .tick-value{position:absolute;top:-30px;transform:translate(-50%,0)}
\ No newline at end of file

package.json

 {
   "name": "jusas-angularjs-slider",
-  "version": "0.1.34",
+  "version": "0.1.35",
   "description": "AngularJS slider directive with no external dependencies. Mobile friendly!.",
   "main": "dist/rzslider.js",
   "repository": {

src/rzslider.js

@@ -4,7 +4,7 @@
  * (c) Rafal Zajac <rzajac@gmail.com>
  * http://github.com/rzajac/angularjs-slider
  *
- * Version: v0.1.34
+ * Version: v0.1.35
  *
  * Licensed under the MIT license
  */
@@ -225,6 +225,13 @@ function throttle(func, wait, options) {
      */
     this.showTicksValue = attributes.rzSliderShowTicksValue;
 
+    /**
+     * Disable the slider
+     *
+     * @type {boolean}
+     */
+    this.disabled = this.scope.rzSliderDisabled;
+
     /**
      * The delta between min and max value
      *
@@ -285,6 +292,7 @@ function throttle(func, wait, options) {
 
       this.initElemHandles();
       this.addAccessibility();
+      this.setDisabledState();
       this.calcViewDimensions();
       this.setMinAndMax();
 
@@ -296,7 +304,7 @@ function throttle(func, wait, options) {
         self.updateCeilLab();
         self.updateFloorLab();
         self.initHandles();
-        if (!self.presentOnly) { self.bindEvents(); }
+        self.bindEvents();
       });
 
       // Recalculate slider view dimensions
@@ -385,13 +393,20 @@ function throttle(func, wait, options) {
       });
       this.deRegFuncs.push(unRegFn);
 
+      unRegFn = this.scope.$watch('rzSliderDisabled', function(newValue, oldValue)
+      {
+        if(newValue === oldValue) { return; }
+        self.resetSlider();
+        if(self.disabled)
+          self.unbindEvents();
+        else
+          self.bindEvents();
+      });
+      this.deRegFuncs.push(unRegFn);
+
       this.scope.$on('$destroy', function()
       {
-        self.minH.off();
-        self.maxH.off();
-        self.fullBar.off();
-        self.selBar.off();
-        self.ticks.off();
+        self.unbindEvents();
         angular.element($window).off('resize', calcDimFn);
         self.deRegFuncs.map(function(unbind) { unbind(); });
       });
@@ -407,9 +422,27 @@ function throttle(func, wait, options) {
       this.setMinAndMax();
       this.updateCeilLab();
       this.updateFloorLab();
+      this.setDisabledState();
       this.calcViewDimensions();
     },
 
+    /**
+     * Set the disabled state based on rzSliderDisabled
+     *
+     * @returns {undefined}
+     */
+    setDisabledState: function()
+    {
+      this.disabled = this.scope.rzSliderDisabled;
+      if(this.disabled) {
+        this.sliderElem.attr('disabled', 'disabled');
+      }
+      else {
+        this.sliderElem.attr('disabled', null);
+      }
+
+    },
+
     /**
      * Reset label values
      *
@@ -1044,6 +1077,7 @@ function throttle(func, wait, options) {
      */
     bindEvents: function()
     {
+      if(this.presentOnly || this.disabled) return;
       var barTracking, barStart, barMove;
 
       if (this.dragRange)
@@ -1078,6 +1112,20 @@ function throttle(func, wait, options) {
       this.ticks.on('touchstart', angular.bind(this, this.onMove, this.ticks));
     },
 
+    /**
+     * Unbind mouse and touch events to slider handles
+     *
+     * @returns {undefined}
+     */
+    unbindEvents: function()
+    {
+      this.minH.off();
+      this.maxH.off();
+      this.fullBar.off();
+      this.selBar.off();
+      this.ticks.off();
+    },
+
     /**
      * onStart event handler
      *
@@ -1363,7 +1411,8 @@ function throttle(func, wait, options) {
       rzSliderOnChange: '&',
       rzSliderOnEnd: '&',
       rzSliderShowTicks: '=?',
-      rzSliderShowTicksValue: '=?'
+      rzSliderShowTicksValue: '=?',
+      rzSliderDisabled: '=?',
     },
 
     /**

src/rzslider.less

@@ -19,6 +19,7 @@
 @labelTextColor: #55637d;
 @handleBgColor: #0db9f0;
 @handleInnerColor: #fff;
+@handleDisabledColor: #d8e0f3;
 @limitLabelTextColor: @labelTextColor;
 @barFillColor: @handleBgColor;
 @barNormalColor: #d8e0f3;
@@ -36,12 +37,25 @@
 @barHeight: 4px;
 
 rzslider {
+
   display: inline-block;
   position: relative;
   height: @barHeight;
   width: 100%;
   margin: 30px 0 15px 0;
   vertical-align: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  &[disabled] {
+    cursor: not-allowed;
+    span.rz-pointer {
+      cursor: not-allowed;
+      background-color: @handleDisabledColor;
+    }
+  }
 }
 
 rzslider span {