feat(range): range can be disabled

Author: manucorporat

src/components/range/range.ios.scss

@@ -12,7 +12,7 @@ $range-ios-slider-height:                     42px !default;
 $range-ios-hit-width:                         42px !default;
 $range-ios-hit-height:                        $range-ios-slider-height !default;
 
-$range-ios-bar-height:                        1px !default;
+$range-ios-bar-height:                        2px !default;
 $range-ios-bar-background-color:              #bdbdbd !default;
 $range-ios-bar-active-background-color:       color($colors-ios, primary) !default;
 
@@ -67,6 +67,8 @@ ion-range {
   width: 100%;
   height: $range-ios-bar-height;
 
+  border-radius: 1px;
+
   background: $range-ios-bar-background-color;
 
   pointer-events: none;
@@ -166,6 +168,11 @@ ion-range {
   transform: translate3d(0, 0, 0) scale(1);
 }
 
+.range-disabled {
+  opacity: 0.5;
+}
+
+
 // Generate iOS Range Colors
 // --------------------------------------------------
 

src/components/range/range.md.scss

@@ -220,6 +220,19 @@ ion-range:not(.range-has-pin) .range-knob-pressed .range-knob {
 
 @include md-range-min();
 
+.range-disabled {
+  .range-bar-active {
+    background-color: $range-md-bar-background-color;
+  }
+
+  .range-knob {
+    transform: scale(.55);
+    background-color: $range-md-bar-background-color;
+    outline: 5px solid white;
+  }
+
+}
+
 
 // Generate Material Design Range Colors
 // --------------------------------------------------

src/components/range/range.ts

@@ -356,6 +356,12 @@ export class Range {
    * @private
    */
   pointerDown(ev: UIEvent) {
+    // TODO: we could stop listening for events instead of checking this._disabled.
+    // since there are a lot of events involved, this solution is
+    // enough for the moment
+    if (this._disabled) {
+      return;
+    }
     console.debug(`range, ${ev.type}`);
 
     // prevent default so scrolling does not happen

src/components/range/test/basic/page1.html

@@ -43,6 +43,14 @@
       </ion-range>
     </ion-item>
 
+    <ion-item>
+      <ion-label>disabled</ion-label>
+      <ion-range min="20" max="80" step="2" [(ngModel)]="singleValue3" disabled=true>
+        <ion-icon small range-left name="sunny"></ion-icon>
+        <ion-icon range-right name="sunny"></ion-icon>
+      </ion-range>
+    </ion-item>
+
     <ion-item>
       <ion-label>step=100, snaps, {{singleValue4}}</ion-label>
       <ion-range min="1000" max="2000" step="100" snaps="true" secondary [(ngModel)]="singleValue4"></ion-range>