fix(slider): make disabled state look like mocks (#2604)

* make slider disabled state match mocks

* added test

* fix lint

* added comments

* addressed comments

Author: mmalerba

src/demo-app/demo-app/demo-app.scss

@@ -21,6 +21,7 @@ body {
 
   .demo-content {
     padding: 32px;
+    box-sizing: border-box;
   }
 
   md-toolbar {

src/demo-app/slider/slider-demo.html

@@ -9,8 +9,8 @@ <h1>Slider with Min and Max</h1>
 <input [(ngModel)]="max">
 
 <h1>Disabled Slider</h1>
-<md-slider disabled #slider3></md-slider>
-{{slider3.value}}
+<md-slider disabled [(ngModel)]="disabledValue"></md-slider>
+<input [(ngModel)]="disabledValue">
 
 <h1>Slider with set value</h1>
 <md-slider value="43"></md-slider>

src/demo-app/slider/slider-demo.ts

@@ -11,4 +11,5 @@ export class SliderDemo {
   val: number = 50;
   min: number = 0;
   max: number = 100;
+  disabledValue = 0;
 }

src/lib/slider/_slider-theme.scss

@@ -10,7 +10,7 @@
   $md-slider-focused-color: rgba(black, 0.38);
   $md-slider-disabled-color: rgba(black, 0.26);
 
-  .md-slider-track {
+  .md-slider-track-background {
     background-color: $md-slider-off-color;
   }
 
@@ -29,4 +29,11 @@
   .md-slider-thumb-label-text {
     color: md-color($accent, default-contrast);
   }
+
+  .md-slider-disabled {
+    .md-slider-track-fill,
+    .md-slider-thumb {
+      background-color: $md-slider-off-color;
+    }
+  }
 }

src/lib/slider/slider.html

@@ -1,5 +1,8 @@
-<div class="md-slider-track">
-  <div class="md-slider-track-fill" [ngStyle]="trackFillStyles"></div>
+<div class="md-slider-wrapper">
+  <div class="md-slider-track-wrapper">
+    <div class="md-slider-track-background" [ngStyle]="trackBackgroundStyles"></div>
+    <div class="md-slider-track-fill" [ngStyle]="trackFillStyles"></div>
+  </div>
   <div class="md-slider-ticks-container" [ngStyle]="ticksContainerStyles">
     <div class="md-slider-ticks" [ngStyle]="ticksStyles"></div>
   </div>

src/lib/slider/slider.scss

@@ -12,6 +12,7 @@ $md-slider-thumb-size: 20px !default;
 
 $md-slider-thumb-default-scale: 0.7 !default;
 $md-slider-thumb-focus-scale: 1 !default;
+$md-slider-thumb-disabled-scale: 0.5 !default;
 
 $md-slider-thumb-arrow-gap: 12px !default;
 
@@ -30,16 +31,29 @@ md-slider {
   vertical-align: middle;
 }
 
-.md-slider-track {
+.md-slider-wrapper {
   position: absolute;
 }
 
+.md-slider-track-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}
+
 .md-slider-track-fill {
   position: absolute;
   transform-origin: 0 0;
   transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
 }
 
+.md-slider-track-background {
+  position: absolute;
+  transform-origin: 100% 100%;
+  transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
+}
+
 .md-slider-ticks-container {
   position: absolute;
   left: 0;
@@ -93,6 +107,7 @@ md-slider {
 // Slider sliding state.
 .md-slider-sliding {
   .md-slider-track-fill,
+  .md-slider-track-background,
   .md-slider-thumb-container {
     // Must use `transition-duration: 0ms` to disable animation rather than `transition: none`.
     // On Mobile Safari `transition: none` causes the slider thumb to appear stuck.
@@ -103,7 +118,7 @@ md-slider {
 
 // Slider with ticks.
 .md-slider-has-ticks {
-  .md-slider-track::after {
+  .md-slider-wrapper::after {
     content: '';
     position: absolute;
     border: 0 solid $md-slider-tick-color;
@@ -113,7 +128,7 @@ md-slider {
 
   &.md-slider-active,
   &:hover {
-    .md-slider-track::after {
+    .md-slider-wrapper::after {
       opacity: 1;
     }
 
@@ -137,6 +152,10 @@ md-slider {
   .md-slider-track-fill {
     transform-origin: 100% 100%;
   }
+
+  .md-slider-track-background {
+    transform-origin: 0 0;
+  }
 }
 
 
@@ -160,22 +179,40 @@ md-slider {
 }
 
 
+// Disabled slider.
+.md-slider-disabled {
+  .md-slider-thumb {
+    transform: scale($md-slider-thumb-disabled-scale);
+  }
+
+  .md-slider-thumb-label {
+    display: none;
+  }
+}
+
+
 // Horizontal slider.
 .md-slider-horizontal {
   height: $md-slider-thickness;
   min-width: $md-slider-min-size;
 
-  .md-slider-track {
+  .md-slider-wrapper {
     height: $md-slider-track-thickness;
     top: ($md-slider-thickness - $md-slider-track-thickness) / 2;
     left: $md-slider-padding;
     right: $md-slider-padding;
   }
 
-  .md-slider-track::after {
+  .md-slider-wrapper::after {
     height: $md-slider-track-thickness;
     border-left-width: $md-slider-tick-size;
     right: 0;
+    top: 0;
+  }
+
+  .md-slider-track-wrapper {
+    height: $md-slider-track-thickness;
+    width: 100%;
   }
 
   .md-slider-track-fill {
@@ -184,6 +221,12 @@ md-slider {
     transform: scaleX(0);
   }
 
+  .md-slider-track-background {
+    height: $md-slider-track-thickness;
+    width: 100%;
+    transform: scaleX(1);
+  }
+
   .md-slider-ticks-container {
     height: $md-slider-track-thickness;
     width: 100%;
@@ -230,17 +273,23 @@ md-slider {
   width: $md-slider-thickness;
   min-height: $md-slider-min-size;
 
-  .md-slider-track {
+  .md-slider-wrapper {
     width: $md-slider-track-thickness;
     top: $md-slider-padding;
     bottom: $md-slider-padding;
     left: ($md-slider-thickness - $md-slider-track-thickness) / 2;
   }
 
-  .md-slider-track::after {
+  .md-slider-wrapper::after {
     width: $md-slider-track-thickness;
     border-top-width: $md-slider-tick-size;
     bottom: 0;
+    left: 0;
+  }
+
+  .md-slider-track-wrapper {
+    height: 100%;
+    width: $md-slider-track-thickness;
   }
 
   .md-slider-track-fill {
@@ -249,6 +298,12 @@ md-slider {
     transform: scaleY(0);
   }
 
+  .md-slider-track-background {
+    height: 100%;
+    width: $md-slider-track-thickness;
+    transform: scaleY(1);
+  }
+
   .md-slider-ticks-container {
     width: $md-slider-track-thickness;
     height: 100%;
@@ -288,7 +343,7 @@ md-slider {
 
 // Slider in RTL languages.
 [dir='rtl'] {
-  .md-slider-track::after {
+  .md-slider-wrapper::after {
     left: 0;
     right: auto;
   }
@@ -298,10 +353,18 @@ md-slider {
       transform-origin: 100% 100%;
     }
 
+    .md-slider-track-background {
+      transform-origin: 0 0;
+    }
+
     &.md-slider-axis-inverted {
       .md-slider-track-fill {
         transform-origin: 0 0;
       }
+
+      .md-slider-track-background {
+        transform-origin: 100% 100%;
+      }
     }
   }
 }