Skip to content

Commit b9b014a

Browse files
crisbetommalerba
authored andcommitted
fix(slider): unable to reset tickInterval after it has been set (#3488)
Fixes user not being allowed to reset the `tickInterval` after it has been set to a valid value. Fixes #3452.
1 parent cdb3763 commit b9b014a

File tree

2 files changed

+23
-4
lines changed

2 files changed

+23
-4
lines changed

src/lib/slider/slider.spec.ts

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -517,6 +517,17 @@ describe('MdSlider', () => {
517517
expect(ticksElement.style.transform).toContain('translateX(9%)');
518518
expect(ticksContainerElement.style.transform).toBe('translateX(-9%)');
519519
});
520+
521+
it('should be able to reset the tick interval after it has been set', () => {
522+
expect(sliderNativeElement.classList)
523+
.toContain('mat-slider-has-ticks', 'Expected element to have ticks initially.');
524+
525+
fixture.componentInstance.tickInterval = null;
526+
fixture.detectChanges();
527+
528+
expect(sliderNativeElement.classList)
529+
.not.toContain('mat-slider-has-ticks', 'Expected element not to have ticks after reset.');
530+
});
520531
});
521532

522533
describe('slider with thumb label', () => {
@@ -1248,10 +1259,12 @@ class SliderWithStep {
12481259
class SliderWithAutoTickInterval { }
12491260

12501261
@Component({
1251-
template: `<md-slider step="3" tickInterval="6"></md-slider>`,
1262+
template: `<md-slider step="3" [tickInterval]="tickInterval"></md-slider>`,
12521263
styles: [styles],
12531264
})
1254-
class SliderWithSetTickInterval { }
1265+
class SliderWithSetTickInterval {
1266+
tickInterval = 6;
1267+
}
12551268

12561269
@Component({
12571270
template: `<md-slider thumbLabel></md-slider>`,

src/lib/slider/slider.ts

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -164,8 +164,14 @@ export class MdSlider implements ControlValueAccessor {
164164
*/
165165
@Input()
166166
get tickInterval() { return this._tickInterval; }
167-
set tickInterval(v) {
168-
this._tickInterval = (v == 'auto') ? v : coerceNumberProperty(v, <number>this._tickInterval);
167+
set tickInterval(value) {
168+
if (value === 'auto') {
169+
this._tickInterval = 'auto';
170+
} else if (typeof value === 'number' || typeof value === 'string') {
171+
this._tickInterval = coerceNumberProperty(value, this._tickInterval as number);
172+
} else {
173+
this._tickInterval = 0;
174+
}
169175
}
170176
private _tickInterval: 'auto' | number = 0;
171177

0 commit comments

Comments
 (0)