diff --git a/src/lib/slider/slider.html b/src/lib/slider/slider.html
index a50837a8e39c..a18361956483 100644
--- a/src/lib/slider/slider.html
+++ b/src/lib/slider/slider.html
@@ -9,7 +9,7 @@
- {{value}}
+ {{displayValue}}
diff --git a/src/lib/slider/slider.spec.ts b/src/lib/slider/slider.spec.ts
index e7acc53f8eed..18017694679e 100644
--- a/src/lib/slider/slider.spec.ts
+++ b/src/lib/slider/slider.spec.ts
@@ -431,6 +431,29 @@ describe('MdSlider', () => {
// The closest snap is at the end of the slider.
expect(trackFillElement.style.transform).toContain('scaleX(1)');
});
+
+ it('should round the value inside the label based on the provided step', () => {
+ let testStep = (step: number, expected: string) => {
+ fixture.componentInstance.step = step;
+ fixture.detectChanges();
+ dispatchSlideEventSequence(sliderNativeElement, 0, 0.333333, gestureConfig);
+ expect(sliderDebugElement.componentInstance.displayValue.toString()).toBe(expected);
+ };
+
+ testStep(1, '33');
+ testStep(0.1, '33.3');
+ testStep(0.01, '33.33');
+ testStep(0.001, '33.333');
+ });
+
+ it('should not add decimals to the value if it is a whole number', () => {
+ fixture.componentInstance.step = 0.1;
+ fixture.detectChanges();
+
+ dispatchSlideEventSequence(sliderNativeElement, 0, 1, gestureConfig);
+
+ expect(sliderDebugElement.componentInstance.displayValue).toBe(100);
+ });
});
describe('slider with auto ticks', () => {
@@ -1162,10 +1185,12 @@ class SliderWithMinAndMax {
class SliderWithValue { }
@Component({
- template: ``,
+ template: ``,
styles: [styles],
})
-class SliderWithStep { }
+class SliderWithStep {
+ step = 25;
+}
@Component({
template: ``,
diff --git a/src/lib/slider/slider.ts b/src/lib/slider/slider.ts
index 45935eccf562..e874791180bc 100644
--- a/src/lib/slider/slider.ts
+++ b/src/lib/slider/slider.ts
@@ -147,12 +147,21 @@ export class MdSlider implements ControlValueAccessor {
*/
_isActive: boolean = false;
+ /** Decimal places to round to, based on the step amount. */
+ private _roundLabelTo: number;
+
private _step: number = 1;
/** The values at which the thumb will snap. */
@Input()
get step() { return this._step; }
- set step(v) { this._step = coerceNumberProperty(v, this._step); }
+ set step(v) {
+ this._step = coerceNumberProperty(v, this._step);
+
+ if (this._step % 1 !== 0) {
+ this._roundLabelTo = this._step.toString().split('.').pop().length;
+ }
+ }
private _tickInterval: 'auto' | number = 0;
@@ -238,6 +247,18 @@ export class MdSlider implements ControlValueAccessor {
set vertical(value: any) { this._vertical = coerceBooleanProperty(value); }
private _vertical = false;
+ /** The value to be used for display purposes. */
+ get displayValue(): string|number {
+ // Note that this could be improved further by rounding something like 0.999 to 1 or
+ // 0.899 to 0.9, however it is very performance sensitive, because it gets called on
+ // every change detection cycle.
+ if (this._roundLabelTo && this.value % 1 !== 0) {
+ return this.value.toFixed(this._roundLabelTo);
+ }
+
+ return this.value;
+ }
+
/**
* Whether the axis of the slider is inverted.
* (i.e. whether moving the thumb in the positive x or y direction decreases the slider's value).