diff --git a/src/demo-app/slider/slider-demo.html b/src/demo-app/slider/slider-demo.html index ed85b1700d1f..88eab53625d9 100644 --- a/src/demo-app/slider/slider-demo.html +++ b/src/demo-app/slider/slider-demo.html @@ -9,7 +9,7 @@

Slider with Min and Max

Disabled Slider

- +

Slider with set value

diff --git a/src/lib/slider/slider.scss b/src/lib/slider/slider.scss index 0e20e653e06e..d8645b867521 100644 --- a/src/lib/slider/slider.scss +++ b/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; diff --git a/src/lib/slider/slider.ts b/src/lib/slider/slider.ts index 45935eccf562..36cb4bba2736 100644 --- a/src/lib/slider/slider.ts +++ b/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'],