fix(slider): hide ticks when slider is disabled (#2687)

* fix(slider): hide ticks when slider is disabled

* No longer shows the ticks on hover, when the slider is disabled.

* Address feedback

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

@@ -9,7 +9,7 @@ <h1>Slider with Min and Max</h1>
 <input [(ngModel)]="max">
 
 <h1>Disabled Slider</h1>
-<md-slider disabled [(ngModel)]="disabledValue"></md-slider>
+<md-slider disabled [(ngModel)]="disabledValue" [tickInterval]="1"></md-slider>
 <input [(ngModel)]="disabledValue">
 
 <h1>Slider with set value</h1>

src/lib/slider/slider.scss

@@ -72,6 +72,11 @@ md-slider {
   transition: opacity $swift-ease-out-duration $swift-ease-out-timing-function;
 }
 
+// TODO(mmalerba): Simplify css to avoid unnecessary selectors.
+.md-slider-disabled .md-slider-ticks {
+  opacity: 0;
+}
+
 .md-slider-thumb-container {
   position: absolute;
   z-index: 1;
@@ -127,8 +132,9 @@ md-slider {
 }
 
 
-// Slider with ticks.
+// Slider with ticks when not disabled.
 .md-slider-has-ticks {
+
   .md-slider-wrapper::after {
     content: '';
     position: absolute;

src/lib/slider/slider.ts

@@ -94,7 +94,7 @@ export class MdSliderChange {
     '[class.md-slider-thumb-label-showing]': 'thumbLabel',
     '[class.md-slider-vertical]': 'vertical',
     '[class.md-slider-min-value]': '_isMinValue',
-    '[class.md-slider-hide-last-tick]': '_isMinValue && _thumbGap && invertAxis',
+    '[class.md-slider-hide-last-tick]': '_isMinValue && _thumbGap && invertAxis || disabled',
   },
   templateUrl: 'slider.html',
   styleUrls: ['slider.css'],