PercentPipe was adding extra space before '%', so replaced it.

Author: mmalerba

src/lib/slider/slider.html

@@ -1,8 +1,8 @@
 <div class="md-slider-track">
-  <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 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>

src/lib/slider/slider.ts

@@ -116,7 +116,6 @@ export class MdSlider implements ControlValueAccessor {
   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;
@@ -169,6 +168,22 @@ export class MdSlider implements ControlValueAccessor {
     this._percent = this._calculatePercentage(this.value);
   }
 
+  get trackFillFlexBasis() {
+    return this.percent * 100 + '%';
+  }
+
+  get ticksMarginLeft() {
+    return this.tickIntervalPercent / 2 * 100 + '%';
+  }
+
+  get ticksContainerMarginLeft() {
+    return '-' + this.ticksMarginLeft;
+  }
+
+  get ticksBackgroundSize() {
+    return this.tickIntervalPercent * 100 + '% 2px';
+  }
+
   constructor(elementRef: ElementRef) {
     this._renderer = new SliderRenderer(elementRef);
   }