From ccd926b8ae706e13b2ccd683639ec437a7b1d12b Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.valladolid@gmail.com>
Date: Wed, 8 Jun 2016 15:46:31 +0200
Subject: [PATCH] feat(range): range can be disabled

---
 src/components/range/range.ios.scss        |  9 ++++++++-
 src/components/range/range.md.scss         | 13 +++++++++++++
 src/components/range/range.ts              |  6 ++++++
 src/components/range/test/basic/page1.html |  8 ++++++++
 4 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/components/range/range.ios.scss b/src/components/range/range.ios.scss
index 188ea0b76cf..fb44750d1f0 100644
--- a/src/components/range/range.ios.scss
+++ b/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
 // --------------------------------------------------
 
diff --git a/src/components/range/range.md.scss b/src/components/range/range.md.scss
index 1fa700c2fee..1c0bc12d903 100644
--- a/src/components/range/range.md.scss
+++ b/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
 // --------------------------------------------------
diff --git a/src/components/range/range.ts b/src/components/range/range.ts
index b5e56745793..a69bfe8b59f 100644
--- a/src/components/range/range.ts
+++ b/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
diff --git a/src/components/range/test/basic/page1.html b/src/components/range/test/basic/page1.html
index b93199fb7be..ace0d3ada0a 100644
--- a/src/components/range/test/basic/page1.html
+++ b/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>