Skip to content

fix(material-experimental/mdc-slider): init step on thumb inputs #21971

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 22, 2021
Merged

fix(material-experimental/mdc-slider): init step on thumb inputs #21971

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2a0bb93
fix(material-experimental/mdc-slider): init step on thumb inputs
wagnermaciel Feb 20, 2021
519f7b7
fix(material-experimental/mdc-slider): code review changes
wagnermaciel Feb 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 22 additions & 16 deletions src/material-experimental/mdc-slider/slider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export class MatSliderThumb implements AfterViewInit {
/** The current value of this slider input. */
@Input()
get value(): number {
return coerceNumberProperty(this._elementRef.nativeElement.getAttribute('value'));
return coerceNumberProperty(this._hostElement.getAttribute('value'));
}
set value(v: number) {
const value = coerceNumberProperty(v);
Expand All @@ -91,7 +91,7 @@ export class MatSliderThumb implements AfterViewInit {
this._slider._setValue(value, this._thumbPosition);
} else {
// Setup for the MDC foundation.
this._elementRef.nativeElement.setAttribute('value', `${value}`);
this._hostElement.setAttribute('value', `${value}`);
}
}

Expand All @@ -114,36 +114,41 @@ export class MatSliderThumb implements AfterViewInit {
? Thumb.START
: Thumb.END;

/** The injected document if available or fallback to the global document reference. */
private _document: Document;

/** The host native HTML input element. */
_hostElement: HTMLInputElement;

constructor(
@Inject(DOCUMENT) document: any,
private readonly _slider: MatSlider,
readonly _elementRef: ElementRef<HTMLInputElement>,
private readonly _elementRef: ElementRef<HTMLInputElement>,
) {
this._document = document;
this._hostElement = _elementRef.nativeElement;
// By calling this in the constructor we guarantee that the sibling sliders initial value by
// has already been set by the time we reach ngAfterViewInit().
this._initializeInputValueAttribute();
}

ngAfterViewInit() {
this._initializeInputMinMax();
this._initializeInputState();
this._initializeInputValueProperty();

// Setup for the MDC foundation.
if (this._slider.disabled) {
this._elementRef.nativeElement.disabled = true;
this._hostElement.disabled = true;
}
}

/** Returns true if this slider input currently has focus. */
_isFocused(): boolean {
return this._document.activeElement === this._elementRef.nativeElement;
return this._document.activeElement === this._hostElement;
}

/**
* Sets the min and max properties on the slider thumb input.
* Sets the min, max, and step properties on the slider thumb input.
*
* Must be called AFTER the sibling slider thumb input is guaranteed to have had its value
* attribute value set. For a range slider, the min and max of the slider thumb input depends on
Expand All @@ -155,15 +160,16 @@ export class MatSliderThumb implements AfterViewInit {
* instead be capped at either the default min or max.
*
*/
private _initializeInputMinMax(): void {
const min = this._elementRef.nativeElement.hasAttribute('matSliderEndThumb')
private _initializeInputState(): void {
const min = this._hostElement.hasAttribute('matSliderEndThumb')
? this._slider._getInput(Thumb.START).value
: this._slider.min;
const max = this._elementRef.nativeElement.hasAttribute('matSliderStartThumb')
const max = this._hostElement.hasAttribute('matSliderStartThumb')
? this._slider._getInput(Thumb.END).value
: this._slider.max;
this._elementRef.nativeElement.min = `${min}`;
this._elementRef.nativeElement.max = `${max}`;
this._hostElement.min = `${min}`;
this._hostElement.max = `${max}`;
this._hostElement.step = `${this._slider.step}`;
}

/**
Expand All @@ -175,7 +181,7 @@ export class MatSliderThumb implements AfterViewInit {
* instead be capped at either the default min or max.
*/
private _initializeInputValueProperty(): void {
this._elementRef.nativeElement.value = `${this.value}`;
this._hostElement.value = `${this.value}`;
}

/**
Expand All @@ -186,8 +192,8 @@ export class MatSliderThumb implements AfterViewInit {
*/
private _initializeInputValueAttribute(): void {
// Only set the default value if an initial value has not already been provided.
if (!this._elementRef.nativeElement.hasAttribute('value')) {
this.value = this._elementRef.nativeElement.hasAttribute('matSliderEndThumb')
if (!this._hostElement.hasAttribute('value')) {
this.value = this._hostElement.hasAttribute('matSliderEndThumb')
? this._slider.max
: this._slider.min;
}
Expand Down Expand Up @@ -369,7 +375,7 @@ export class MatSlider implements AfterViewInit, OnDestroy {

/** Gets the slider thumb HTML input element of the given thumb position. */
_getInputElement(thumbPosition: Thumb): HTMLInputElement {
return this._getInput(thumbPosition)._elementRef.nativeElement;
return this._getInput(thumbPosition)._hostElement;
}

/** Gets the slider thumb HTML element of the given thumb position. */
Expand Down