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

Author: Valentin Hervieu

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

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

demo/index.html

@@ -151,6 +151,15 @@ <h2>Toggle slider example</h2>
         </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 @@ <h2>Toggle slider example</h2>
       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 <[email protected]>
  * 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: '=?',
     },
 
     /**