Addressed comments.

Author: mmalerba

package.json

@@ -81,7 +81,7 @@
     "run-sequence": "^1.2.2",
     "sass": "^0.5.0",
     "strip-ansi": "^3.0.0",
-    "stylelint": "^6.9.0",
+    "stylelint": "^7.5.0",
     "symlink-or-copy": "^1.0.1",
     "ts-node": "^0.7.3",
     "tslint": "^3.13.0",

src/lib/core/coersion/number-property.spec.ts

@@ -0,0 +1,76 @@
+import {coerceNumberProperty} from './number-property';
+
+
+describe('coerceNumberProperty', () => {
+  it('should coerce undefined to 0 or default', () => {
+    expect(coerceNumberProperty(undefined)).toBe(0);
+    expect(coerceNumberProperty(undefined, 111)).toBe(111);
+  });
+
+  it('should coerce null to 0 or default', () => {
+    expect(coerceNumberProperty(null)).toBe(0);
+    expect(coerceNumberProperty(null, 111)).toBe(111);
+  });
+
+  it('should coerce true to 0 or default', () => {
+    expect(coerceNumberProperty(true)).toBe(0);
+    expect(coerceNumberProperty(true, 111)).toBe(111);
+  });
+
+  it('should coerce false to 0 or default', () => {
+    expect(coerceNumberProperty(false)).toBe(0);
+    expect(coerceNumberProperty(false, 111)).toBe(111);
+
+  });
+
+  it('should coerce the empty string to 0 or default', () => {
+    expect(coerceNumberProperty('')).toBe(0);
+    expect(coerceNumberProperty('', 111)).toBe(111);
+
+  });
+
+  it('should coerce the string "1" to 1', () => {
+    expect(coerceNumberProperty('1')).toBe(1);
+    expect(coerceNumberProperty('1', 111)).toBe(1);
+  });
+
+  it('should coerce the string "123.456" to 123.456', () => {
+    expect(coerceNumberProperty('123.456')).toBe(123.456);
+    expect(coerceNumberProperty('123.456', 111)).toBe(123.456);
+  });
+
+  it('should coerce the string "-123.456" to -123.456', () => {
+    expect(coerceNumberProperty('-123.456')).toBe(-123.456);
+    expect(coerceNumberProperty('-123.456', 111)).toBe(-123.456);
+  });
+
+  it('should coerce an arbitrary string to 0 or default', () => {
+    expect(coerceNumberProperty('pink')).toBe(0);
+    expect(coerceNumberProperty('pink', 111)).toBe(111);
+  });
+
+  it('should coerce the number 1 to 1', () => {
+    expect(coerceNumberProperty(1)).toBe(1);
+    expect(coerceNumberProperty(1, 111)).toBe(1);
+  });
+
+  it('should coerce the number 123.456 to 123.456', () => {
+    expect(coerceNumberProperty(123.456)).toBe(123.456);
+    expect(coerceNumberProperty(123.456, 111)).toBe(123.456);
+  });
+
+  it('should coerce the number -123.456 to -123.456', () => {
+    expect(coerceNumberProperty(-123.456)).toBe(-123.456);
+    expect(coerceNumberProperty(-123.456, 111)).toBe(-123.456);
+  });
+
+  it('should coerce an object to 0 or default', () => {
+    expect(coerceNumberProperty({})).toBe(0);
+    expect(coerceNumberProperty({}, 111)).toBe(111);
+  });
+
+  it('should coerce an array to 0 or default', () => {
+    expect(coerceNumberProperty([])).toBe(0);
+    expect(coerceNumberProperty([], 111)).toBe(111);
+  });
+});

src/lib/core/coersion/number-property.ts

@@ -0,0 +1,4 @@
+/** Coerces a data-bound value (typically a string) to a number. */
+export function coerceNumberProperty(value: any, fallbackValue = 0) {
+  return isNaN(parseFloat(value as any)) ? fallbackValue : Number(value);
+}

src/lib/core/core.ts

@@ -83,6 +83,7 @@ export * from './animation/animation';
 
 // Coersion
 export {coerceBooleanProperty} from './coersion/boolean-property';
+export {coerceNumberProperty} from './coersion/number-property';
 
 
 @NgModule({

src/lib/slider/slider.html

@@ -1,8 +1,8 @@
 <div class="md-slider-track">
-  <div class="md-slider-track-fill" [style.flexBasis]="percent * 100 + '%'"></div>
-  <div class="md-slider-ticks-container" [style.marginLeft]="-tickIntervalPercent / 2 * 100 + '%'">
-    <div class="md-slider-ticks" [style.marginLeft]="tickIntervalPercent / 2 * 100 + '%'"
-         [style.backgroundSize]="tickIntervalPercent * 100 + '% 2px'"></div>
+  <div class="md-slider-track-fill" [style.flexBasis]="percent | percent"></div>
+  <div class="md-slider-ticks-container" [style.marginLeft]="-halfTickIntervalPercent | percent">
+    <div class="md-slider-ticks" [style.marginLeft]="halfTickIntervalPercent | percent"
+         [style.backgroundSize]="(tickIntervalPercent | percent) + ' 2px'"></div>
   </div>
   <div class="md-slider-thumb-container">
     <div class="md-slider-thumb"></div>

src/lib/slider/slider.scss

@@ -69,8 +69,8 @@ md-slider {
 .md-slider-ticks {
   background: repeating-linear-gradient(to right, $md-slider-tick-color,
       $md-slider-tick-color $md-slider-tick-size, transparent 0, transparent) repeat;
-  /* Firefox doesn't draw the gradient correctly with 'to right'
-     (see https://bugzilla.mozilla.org/show_bug.cgi?id=1314319). */
+  // Firefox doesn't draw the gradient correctly with 'to right'
+  // (see https://bugzilla.mozilla.org/show_bug.cgi?id=1314319).
   background: -moz-repeating-linear-gradient(0.0001deg, $md-slider-tick-color,
       $md-slider-tick-color $md-slider-tick-size, transparent 0, transparent) repeat;
   height: $md-slider-track-thickness;

src/lib/slider/slider.spec.ts

@@ -126,7 +126,7 @@ describe('MdSlider', () => {
       expect(sliderNativeElement.classList).toContain('md-slider-active');
 
       // Call the `onBlur` handler directly because we cannot simulate a focus event in unit tests.
-      sliderInstance.onBlur();
+      sliderInstance._onBlur();
       fixture.detectChanges();
 
       expect(sliderNativeElement.classList).not.toContain('md-slider-active');

src/lib/slider/slider.ts

@@ -9,8 +9,9 @@ import {
 } from '@angular/core';
 import {NG_VALUE_ACCESSOR, ControlValueAccessor, FormsModule} from '@angular/forms';
 import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
-import {MdGestureConfig, coerceBooleanProperty} from '../core';
+import {MdGestureConfig, coerceBooleanProperty, coerceNumberProperty} from '../core';
 import {Input as HammerInput} from 'hammerjs';
+import {CommonModule} from '@angular/common';
 
 /**
  * Visually, a 30px separation between tick marks looks best. This is very subjective but it is
@@ -33,25 +34,21 @@ export const MD_SLIDER_VALUE_ACCESSOR: any = {
   selector: 'md-slider',
   providers: [MD_SLIDER_VALUE_ACCESSOR],
   host: {
-    '(blur)': 'onBlur()',
-    '(click)': 'onClick($event)',
-    '(mouseenter)': 'onMouseenter()',
-    '(slide)': 'onSlide($event)',
-    '(slideend)': 'onSlideEnd()',
-    '(slidestart)': 'onSlideStart($event)',
-    '(window:resize)': 'onResize()',
-
+    '(blur)': '_onBlur()',
+    '(click)': '_onClick($event)',
+    '(mouseenter)': '_onMouseenter()',
+    '(slide)': '_onSlide($event)',
+    '(slideend)': '_onSlideEnd()',
+    '(slidestart)': '_onSlideStart($event)',
     'tabindex': '0',
-
     '[attr.aria-disabled]': 'disabled',
     '[attr.aria-valuemax]': 'max',
     '[attr.aria-valuemin]': 'min',
     '[attr.aria-valuenow]': 'value',
-
-    '[class.md-slider-active]': 'isActive',
+    '[class.md-slider-active]': '_isActive',
     '[class.md-slider-disabled]': 'disabled',
     '[class.md-slider-has-ticks]': 'tickInterval',
-    '[class.md-slider-sliding]': 'isSliding',
+    '[class.md-slider-sliding]': '_isSliding',
     '[class.md-slider-thumb-label-showing]': 'thumbLabel',
   },
   templateUrl: 'slider.html',
@@ -87,32 +84,21 @@ export class MdSlider implements ControlValueAccessor {
   /**
    * Whether or not the thumb is sliding.
    * Used to determine if there should be a transition for the thumb and fill track.
-   * TODO: internal
    */
-  isSliding: boolean = false;
+  _isSliding: boolean = false;
 
   /**
    * Whether or not the slider is active (clicked or sliding).
    * Used to shrink and grow the thumb as according to the Material Design spec.
-   * TODO: internal
    */
-  isActive: boolean = false;
+  _isActive: boolean = false;
 
   /** The values at which the thumb will snap. */
   private _step: number = 1;
 
   @Input()
-  get step() {
-    return this._step;
-  }
-  set step(v) {
-    // Only set the value to a valid number. v is casted to an any as we know it will come in as a
-    // string but it is labeled as a number which causes parseFloat to not accept it.
-    if (isNaN(parseFloat(<any> v))) {
-      return;
-    }
-    this._step = Number(v);
-  }
+  get step() { return this._step; }
+  set step(v) { this._step = coerceNumberProperty(v, this._step); }
 
   /**
    * How often to show ticks. Relative to the step so that a tick always appears on a step.
@@ -122,23 +108,15 @@ export class MdSlider implements ControlValueAccessor {
 
   @Input('tick-interval')
   get tickInterval() { return this._tickInterval; }
-  set tickInterval(v: 'auto' | number) {
-    // Only set the tickInterval to a valid number. v is casted to an any as we know it will come
-    // in as a string but it is labeled as a number which causes parseInt to not accept it.
-    if (v == 'auto') {
-      this._tickInterval = v;
-    } else {
-      let intV = parseInt(<any> v);
-      if (!isNaN(intV)) {
-        this._tickInterval = intV;
-      }
-    }
+  set tickInterval(v) {
+    this._tickInterval = (v == 'auto') ? v : coerceNumberProperty(v, <number>this._tickInterval);
   }
 
   /** The size of a tick interval as a percentage of the size of the track. */
   private _tickIntervalPercent: number = 0;
 
   get tickIntervalPercent() { return this._tickIntervalPercent; }
+  get halfTickIntervalPercent() { return this._tickIntervalPercent / 2; }
 
   /** The percentage of the slider that coincides with the value. */
   private _percent: number = 0;
@@ -157,13 +135,7 @@ export class MdSlider implements ControlValueAccessor {
     return this._value;
   }
   set value(v: number) {
-    // Only set the value to a valid number. v is casted to an any as we know it will come in as a
-    // string but it is labeled as a number which causes parseFloat to not accept it.
-    if (isNaN(parseFloat(<any> v))) {
-      return;
-    }
-
-    this._value = Number(v);
+    this._value = coerceNumberProperty(v, this._value);
     this._percent = this._calculatePercentage(this._value);
     this._controlValueAccessorChangeFn(this._value);
   }
@@ -176,14 +148,7 @@ export class MdSlider implements ControlValueAccessor {
     return this._min;
   }
   set min(v: number) {
-    // Only set the value to a valid number. v is casted to an any as we know it will come in as a
-    // string but it is labeled as a number which causes parseFloat to not accept it.
-    if (isNaN(parseFloat(<any> v))) {
-      return;
-    }
-
-    // This has to be forced as a number to handle the math later.
-    this._min = Number(v);
+    this._min = coerceNumberProperty(v, this._min);
 
     // If the value wasn't explicitly set by the user, set it to the min.
     if (this._value === null) {
@@ -200,38 +165,37 @@ export class MdSlider implements ControlValueAccessor {
     return this._max;
   }
   set max(v: number) {
-    this._max = Number(v);
+    this._max = coerceNumberProperty(v, this._max);
     this._percent = this._calculatePercentage(this.value);
   }
 
   constructor(elementRef: ElementRef) {
     this._renderer = new SliderRenderer(elementRef);
   }
 
-  /** TODO: internal */
-  onMouseenter() {
+  _onMouseenter() {
     if (this.disabled) {
       return;
     }
 
+    // We save the dimensions of the slider here so we can use them to update the spacing of the
+    // ticks and determine where on the slider click and slide events happen.
     this._sliderDimensions = this._renderer.getSliderDimensions();
     this._updateTickIntervalPercent();
   }
 
-  /** TODO: internal */
-  onClick(event: MouseEvent) {
+  _onClick(event: MouseEvent) {
     if (this.disabled) {
       return;
     }
 
-    this.isActive = true;
-    this.isSliding = false;
+    this._isActive = true;
+    this._isSliding = false;
     this._renderer.addFocus();
     this._updateValueFromPosition(event.clientX);
   }
 
-  /** TODO: internal */
-  onSlide(event: HammerInput) {
+  _onSlide(event: HammerInput) {
     if (this.disabled) {
       return;
     }
@@ -241,36 +205,24 @@ export class MdSlider implements ControlValueAccessor {
     this._updateValueFromPosition(event.center.x);
   }
 
-  /** TODO: internal */
-  onSlideStart(event: HammerInput) {
+  _onSlideStart(event: HammerInput) {
     if (this.disabled) {
       return;
     }
 
     event.preventDefault();
-    this.isSliding = true;
-    this.isActive = true;
+    this._isSliding = true;
+    this._isActive = true;
     this._renderer.addFocus();
     this._updateValueFromPosition(event.center.x);
   }
 
-  /** TODO: internal */
-  onSlideEnd() {
-    this.isSliding = false;
-  }
-
-  /** TODO: internal */
-  onResize() {
-    // Consider the slider to be sliding during resize to prevent animation.
-    this.isSliding = true;
-    setTimeout(() => {
-      this.isSliding = false;
-    }, 0);
+  _onSlideEnd() {
+    this._isSliding = false;
   }
 
-  /** TODO: internal */
-  onBlur() {
-    this.isActive = false;
+  _onBlur() {
+    this._isActive = false;
     this.onTouched();
   }
 
@@ -337,23 +289,20 @@ export class MdSlider implements ControlValueAccessor {
 
   /**
    * Implemented as part of ControlValueAccessor.
-   * TODO: internal
    */
   writeValue(value: any) {
     this.value = value;
   }
 
   /**
    * Implemented as part of ControlValueAccessor.
-   * TODO: internal
    */
   registerOnChange(fn: (value: any) => void) {
     this._controlValueAccessorChangeFn = fn;
   }
 
   /**
    * Implemented as part of ControlValueAccessor.
-   * TODO: internal
    */
   registerOnTouched(fn: any) {
     this.onTouched = fn;
@@ -398,7 +347,7 @@ export class SliderRenderer {
 
 
 @NgModule({
-  imports: [FormsModule],
+  imports: [FormsModule, CommonModule],
   exports: [MdSlider],
   declarations: [MdSlider],
   providers: [