diff --git a/src/lib/slider/slider.ts b/src/lib/slider/slider.ts
index 670945d401b..3788213cbf8 100644
--- a/src/lib/slider/slider.ts
+++ b/src/lib/slider/slider.ts
@@ -19,6 +19,7 @@ import {
ViewEncapsulation,
ChangeDetectionStrategy,
ChangeDetectorRef,
+ ViewChild,
} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
import {coerceBooleanProperty, coerceNumberProperty, HammerInput} from '../core';
@@ -377,9 +378,6 @@ export class MdSlider extends _MdSliderMixinBase
/** The size of a tick interval as a percentage of the size of the track. */
private _tickIntervalPercent: number = 0;
- /** A renderer to handle updating the slider's thumb and fill track. */
- private _renderer: SliderRenderer;
-
/** The dimensions of the slider. */
private _sliderDimensions: ClientRect | null = null;
@@ -391,6 +389,9 @@ export class MdSlider extends _MdSliderMixinBase
/** The value of the slider when the slide start event fires. */
private _valueOnSlideStart: number | null;
+ /** Reference to the inner slider wrapper element. */
+ @ViewChild('sliderWrapper') private _sliderWrapper: ElementRef;
+
/**
* Whether mouse events should be converted to a slider position by calculating their distance
* from the right or bottom edge of the slider as opposed to the top or left.
@@ -412,7 +413,6 @@ export class MdSlider extends _MdSliderMixinBase
this._focusOriginMonitor
.monitor(this._elementRef.nativeElement, renderer, true)
.subscribe((origin: FocusOrigin) => this._isActive = !!origin && origin !== 'keyboard');
- this._renderer = new SliderRenderer(this._elementRef);
}
ngOnDestroy() {
@@ -426,7 +426,7 @@ export class MdSlider extends _MdSliderMixinBase
// We save the dimensions of the slider here so we can use them to update the spacing of the
// ticks and determine where on the slider click and slide events happen.
- this._sliderDimensions = this._renderer.getSliderDimensions();
+ this._sliderDimensions = this._getSliderDimensions();
this._updateTickIntervalPercent();
}
@@ -437,7 +437,7 @@ export class MdSlider extends _MdSliderMixinBase
let oldValue = this.value;
this._isSliding = false;
- this._renderer.addFocus();
+ this._focusHostElement();
this._updateValueFromPosition({x: event.clientX, y: event.clientY});
/* Emit a change and input event if the value changed. */
@@ -479,7 +479,7 @@ export class MdSlider extends _MdSliderMixinBase
this._onMouseenter();
this._isSliding = true;
- this._renderer.addFocus();
+ this._focusHostElement();
this._valueOnSlideStart = this.value;
if (event) {
@@ -500,7 +500,7 @@ export class MdSlider extends _MdSliderMixinBase
_onFocus() {
// We save the dimensions of the slider here so we can use them to update the spacing of the
// ticks and determine where on the slider click and slide events happen.
- this._sliderDimensions = this._renderer.getSliderDimensions();
+ this._sliderDimensions = this._getSliderDimensions();
this._updateTickIntervalPercent();
}
@@ -647,6 +647,23 @@ export class MdSlider extends _MdSliderMixinBase
return Math.max(min, Math.min(value, max));
}
+ /**
+ * Get the bounding client rect of the slider track element.
+ * The track is used rather than the native element to ignore the extra space that the thumb can
+ * take up.
+ */
+ private _getSliderDimensions() {
+ return this._sliderWrapper ? this._sliderWrapper.nativeElement.getBoundingClientRect() : null;
+ }
+
+ /**
+ * Focuses the native element.
+ * Currently only used to allow a blur event to fire but will be used with keyboard input later.
+ */
+ private _focusHostElement() {
+ this._elementRef.nativeElement.focus();
+ }
+
/**
* Sets the model value. Implemented as part of ControlValueAccessor.
* @param value
@@ -682,33 +699,3 @@ export class MdSlider extends _MdSliderMixinBase
this.disabled = isDisabled;
}
}
-
-/**
- * Renderer class in order to keep all dom manipulation in one place and outside of the main class.
- * @docs-private
- */
-export class SliderRenderer {
- private _sliderElement: HTMLElement;
-
- constructor(elementRef: ElementRef) {
- this._sliderElement = elementRef.nativeElement;
- }
-
- /**
- * Get the bounding client rect of the slider track element.
- * The track is used rather than the native element to ignore the extra space that the thumb can
- * take up.
- */
- getSliderDimensions() {
- let wrapperElement = this._sliderElement.querySelector('.mat-slider-wrapper');
- return wrapperElement ? wrapperElement.getBoundingClientRect() : null;
- }
-
- /**
- * Focuses the native element.
- * Currently only used to allow a blur event to fire but will be used with keyboard input later.
- */
- addFocus() {
- this._sliderElement.focus();
- }
-}