fix(slider): use percent values for the track (#1663)

fixes #1389 
fixes #1304 
fixes #1234

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/demo-app/slider/slider-demo.html

@@ -33,3 +33,9 @@ <h1>Slider with one-way binding</h1>
 <h1>Slider with two-way binding</h1>
 <md-slider [(ngModel)]="demo" step="40"></md-slider>
 <input [(ngModel)]="demo">
+
+<md-tab-group>
+  <md-tab label="One">
+    <md-slider min="1" max="5" value="3"></md-slider>
+  </md-tab>
+</md-tab-group>

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

@@ -0,0 +1,81 @@
+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 an arbitrary string prefixed with a number to 0 or default', () => {
+    expect(coerceNumberProperty('123pink')).toBe(0);
+    expect(coerceNumberProperty('123pink', 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,7 @@
+/** Coerces a data-bound value (typically a string) to a number. */
+export function coerceNumberProperty(value: any, fallbackValue = 0) {
+  // parseFloat(value) handles most of the cases we're interested in (it treats null, empty string,
+  // and other non-number values as NaN, where Number just uses 0) but it considers the string
+  // '123hello' to be a valid number. Therefore we also check if Number(value) is NaN.
+  return isNaN(parseFloat(value as any)) || isNaN(Number(value)) ? 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-theme.scss

@@ -18,9 +18,8 @@
     background-color: md-color($accent);
   }
 
-  .md-slider-thumb::after {
+  .md-slider-thumb {
     background-color: md-color($accent);
-    border-color: md-color($accent);
   }
 
   .md-slider-thumb-label {

src/lib/slider/slider.html

@@ -1,21 +1,13 @@
-<div class="md-slider-wrapper">
-  <div class="md-slider-container"
-       [class.md-slider-sliding]="isSliding"
-       [class.md-slider-active]="isActive"
-       [class.md-slider-thumb-label-showing]="thumbLabel">
-    <div class="md-slider-track-container">
-      <div class="md-slider-track"></div>
-      <div class="md-slider-track md-slider-track-fill"></div>
-      <div class="md-slider-tick-container"></div>
-      <div class="md-slider-last-tick-container"></div>
-    </div>
-    <div class="md-slider-thumb-container">
-      <div class="md-slider-thumb-position">
-        <div class="md-slider-thumb"></div>
-        <div class="md-slider-thumb-label">
-          <span class="md-slider-thumb-label-text">{{value}}</span>
-        </div>
-      </div>
+<div class="md-slider-track">
+  <div class="md-slider-track-fill" [style.flexBasis]="trackFillFlexBasis"></div>
+  <div class="md-slider-ticks-container" [style.marginLeft]="ticksContainerMarginLeft">
+    <div class="md-slider-ticks" [style.marginLeft]="ticksMarginLeft"
+         [style.backgroundSize]="ticksBackgroundSize"></div>
+  </div>
+  <div class="md-slider-thumb-container">
+    <div class="md-slider-thumb"></div>
+    <div class="md-slider-thumb-label">
+      <span class="md-slider-thumb-label-text">{{value}}</span>
     </div>
   </div>
-</div>
+</div>