Skip to content

Commit d9a1b81

Browse files
andrewseguinandrewseguin
authored
fix(material-experimental/mdc-slider): keep value indicator within bounds (#24167)
1 parent 03485cd commit d9a1b81

File tree

4 files changed

+691
-667
lines changed

4 files changed

+691
-667
lines changed

‎package.json

Lines changed: 48 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060
"@types/google.maps": "^3.45.6",
6161
"@types/youtube": "^0.0.42",
6262
"core-js-bundle": "^3.8.2",
63-
"material-components-web": "14.0.0-canary.7d8ea4624.0",
63+
"material-components-web": "14.0.0-canary.c047f7c19.0",
6464
"rxjs": "^6.6.7",
6565
"rxjs-tslint-rules": "^4.33.1",
6666
"tslib": "^2.3.0",
@@ -92,53 +92,53 @@
9292
"@bazel/terser": "4.4.5",
9393
"@bazel/typescript": "4.4.5",
9494
"@firebase/app-types": "^0.6.1",
95-
"@material/animation": "14.0.0-canary.7d8ea4624.0",
96-
"@material/auto-init": "14.0.0-canary.7d8ea4624.0",
97-
"@material/banner": "14.0.0-canary.7d8ea4624.0",
98-
"@material/base": "14.0.0-canary.7d8ea4624.0",
99-
"@material/button": "14.0.0-canary.7d8ea4624.0",
100-
"@material/card": "14.0.0-canary.7d8ea4624.0",
101-
"@material/checkbox": "14.0.0-canary.7d8ea4624.0",
102-
"@material/chips": "14.0.0-canary.7d8ea4624.0",
103-
"@material/circular-progress": "14.0.0-canary.7d8ea4624.0",
104-
"@material/data-table": "14.0.0-canary.7d8ea4624.0",
105-
"@material/density": "14.0.0-canary.7d8ea4624.0",
106-
"@material/dialog": "14.0.0-canary.7d8ea4624.0",
107-
"@material/dom": "14.0.0-canary.7d8ea4624.0",
108-
"@material/drawer": "14.0.0-canary.7d8ea4624.0",
109-
"@material/elevation": "14.0.0-canary.7d8ea4624.0",
110-
"@material/fab": "14.0.0-canary.7d8ea4624.0",
111-
"@material/feature-targeting": "14.0.0-canary.7d8ea4624.0",
112-
"@material/floating-label": "14.0.0-canary.7d8ea4624.0",
113-
"@material/form-field": "14.0.0-canary.7d8ea4624.0",
114-
"@material/icon-button": "14.0.0-canary.7d8ea4624.0",
115-
"@material/image-list": "14.0.0-canary.7d8ea4624.0",
116-
"@material/layout-grid": "14.0.0-canary.7d8ea4624.0",
117-
"@material/line-ripple": "14.0.0-canary.7d8ea4624.0",
118-
"@material/linear-progress": "14.0.0-canary.7d8ea4624.0",
119-
"@material/list": "14.0.0-canary.7d8ea4624.0",
120-
"@material/menu": "14.0.0-canary.7d8ea4624.0",
121-
"@material/menu-surface": "14.0.0-canary.7d8ea4624.0",
122-
"@material/notched-outline": "14.0.0-canary.7d8ea4624.0",
123-
"@material/radio": "14.0.0-canary.7d8ea4624.0",
124-
"@material/ripple": "14.0.0-canary.7d8ea4624.0",
125-
"@material/rtl": "14.0.0-canary.7d8ea4624.0",
126-
"@material/segmented-button": "14.0.0-canary.7d8ea4624.0",
127-
"@material/select": "14.0.0-canary.7d8ea4624.0",
128-
"@material/shape": "14.0.0-canary.7d8ea4624.0",
129-
"@material/slider": "14.0.0-canary.7d8ea4624.0",
130-
"@material/snackbar": "14.0.0-canary.7d8ea4624.0",
131-
"@material/switch": "14.0.0-canary.7d8ea4624.0",
132-
"@material/tab": "14.0.0-canary.7d8ea4624.0",
133-
"@material/tab-bar": "14.0.0-canary.7d8ea4624.0",
134-
"@material/tab-indicator": "14.0.0-canary.7d8ea4624.0",
135-
"@material/tab-scroller": "14.0.0-canary.7d8ea4624.0",
136-
"@material/textfield": "14.0.0-canary.7d8ea4624.0",
137-
"@material/theme": "14.0.0-canary.7d8ea4624.0",
138-
"@material/tooltip": "14.0.0-canary.7d8ea4624.0",
139-
"@material/top-app-bar": "14.0.0-canary.7d8ea4624.0",
140-
"@material/touch-target": "14.0.0-canary.7d8ea4624.0",
141-
"@material/typography": "14.0.0-canary.7d8ea4624.0",
95+
"@material/animation": "14.0.0-canary.c047f7c19.0",
96+
"@material/auto-init": "14.0.0-canary.c047f7c19.0",
97+
"@material/banner": "14.0.0-canary.c047f7c19.0",
98+
"@material/base": "14.0.0-canary.c047f7c19.0",
99+
"@material/button": "14.0.0-canary.c047f7c19.0",
100+
"@material/card": "14.0.0-canary.c047f7c19.0",
101+
"@material/checkbox": "14.0.0-canary.c047f7c19.0",
102+
"@material/chips": "14.0.0-canary.c047f7c19.0",
103+
"@material/circular-progress": "14.0.0-canary.c047f7c19.0",
104+
"@material/data-table": "14.0.0-canary.c047f7c19.0",
105+
"@material/density": "14.0.0-canary.c047f7c19.0",
106+
"@material/dialog": "14.0.0-canary.c047f7c19.0",
107+
"@material/dom": "14.0.0-canary.c047f7c19.0",
108+
"@material/drawer": "14.0.0-canary.c047f7c19.0",
109+
"@material/elevation": "14.0.0-canary.c047f7c19.0",
110+
"@material/fab": "14.0.0-canary.c047f7c19.0",
111+
"@material/feature-targeting": "14.0.0-canary.c047f7c19.0",
112+
"@material/floating-label": "14.0.0-canary.c047f7c19.0",
113+
"@material/form-field": "14.0.0-canary.c047f7c19.0",
114+
"@material/icon-button": "14.0.0-canary.c047f7c19.0",
115+
"@material/image-list": "14.0.0-canary.c047f7c19.0",
116+
"@material/layout-grid": "14.0.0-canary.c047f7c19.0",
117+
"@material/line-ripple": "14.0.0-canary.c047f7c19.0",
118+
"@material/linear-progress": "14.0.0-canary.c047f7c19.0",
119+
"@material/list": "14.0.0-canary.c047f7c19.0",
120+
"@material/menu": "14.0.0-canary.c047f7c19.0",
121+
"@material/menu-surface": "14.0.0-canary.c047f7c19.0",
122+
"@material/notched-outline": "14.0.0-canary.c047f7c19.0",
123+
"@material/radio": "14.0.0-canary.c047f7c19.0",
124+
"@material/ripple": "14.0.0-canary.c047f7c19.0",
125+
"@material/rtl": "14.0.0-canary.c047f7c19.0",
126+
"@material/segmented-button": "14.0.0-canary.c047f7c19.0",
127+
"@material/select": "14.0.0-canary.c047f7c19.0",
128+
"@material/shape": "14.0.0-canary.c047f7c19.0",
129+
"@material/slider": "14.0.0-canary.c047f7c19.0",
130+
"@material/snackbar": "14.0.0-canary.c047f7c19.0",
131+
"@material/switch": "14.0.0-canary.c047f7c19.0",
132+
"@material/tab": "14.0.0-canary.c047f7c19.0",
133+
"@material/tab-bar": "14.0.0-canary.c047f7c19.0",
134+
"@material/tab-indicator": "14.0.0-canary.c047f7c19.0",
135+
"@material/tab-scroller": "14.0.0-canary.c047f7c19.0",
136+
"@material/textfield": "14.0.0-canary.c047f7c19.0",
137+
"@material/theme": "14.0.0-canary.c047f7c19.0",
138+
"@material/tooltip": "14.0.0-canary.c047f7c19.0",
139+
"@material/top-app-bar": "14.0.0-canary.c047f7c19.0",
140+
"@material/touch-target": "14.0.0-canary.c047f7c19.0",
141+
"@material/typography": "14.0.0-canary.c047f7c19.0",
142142
"@octokit/rest": "18.3.5",
143143
"@rollup/plugin-commonjs": "^21.0.0",
144144
"@rollup/plugin-node-resolve": "^13.0.5",

‎src/material-experimental/mdc-slider/slider-thumb.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="mdc-slider__value-indicator-container" *ngIf="discrete">
1+
<div class="mdc-slider__value-indicator-container" *ngIf="discrete" #valueIndicatorContainer>
22
<div class="mdc-slider__value-indicator">
33
<span class="mdc-slider__value-indicator-text">{{valueIndicatorText}}</span>
44
</div>

‎src/material-experimental/mdc-slider/slider.ts

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -104,9 +104,13 @@ export class MatSliderVisualThumb implements AfterViewInit, OnDestroy {
104104
/** The MatRipple for this slider thumb. */
105105
@ViewChild(MatRipple) private readonly _ripple: MatRipple;
106106

107-
/** The slider thumb knob */
107+
/** The slider thumb knob. */
108108
@ViewChild('knob') _knob: ElementRef<HTMLElement>;
109109

110+
/** The slider thumb value indicator container. */
111+
@ViewChild('valueIndicatorContainer')
112+
_valueIndicatorContainer: ElementRef<HTMLElement>;
113+
110114
/** The slider input corresponding to this slider thumb. */
111115
private _sliderInput: MatSliderThumb;
112116

@@ -261,6 +265,14 @@ export class MatSliderVisualThumb implements AfterViewInit, OnDestroy {
261265
_getKnob(): HTMLElement {
262266
return this._knob.nativeElement;
263267
}
268+
269+
/**
270+
* Gets the native HTML element of the slider thumb value indicator
271+
* container.
272+
*/
273+
_getValueIndicatorContainer(): HTMLElement {
274+
return this._valueIndicatorContainer.nativeElement;
275+
}
264276
}
265277

266278
/**
@@ -868,6 +880,14 @@ export class MatSlider
868880
return this._getThumb(thumbPosition)._getKnob();
869881
}
870882

883+
/**
884+
* Gets the slider value indicator container HTML element of the given thumb
885+
* position.
886+
*/
887+
_getValueIndicatorContainerElement(thumbPosition: Thumb): HTMLElement {
888+
return this._getThumb(thumbPosition)._getValueIndicatorContainer();
889+
}
890+
871891
/**
872892
* Sets the value indicator text of the given thumb position using the given value.
873893
*
@@ -1066,6 +1086,10 @@ class SliderAdapter implements MDCSliderAdapter {
10661086
getBoundingClientRect = (): ClientRect => {
10671087
return this._delegate._elementRef.nativeElement.getBoundingClientRect();
10681088
};
1089+
getValueIndicatorContainerWidth = (thumbPosition: Thumb): number => {
1090+
return this._delegate._getValueIndicatorContainerElement(thumbPosition).getBoundingClientRect()
1091+
.width;
1092+
};
10691093
isRTL = (): boolean => {
10701094
return this._delegate._isRTL();
10711095
};

0 commit comments

Comments
 (0)