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).