Skip to content

fix(material-experimental/slider): incorrectly rendering extra background #17207

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 1 commit into from
Oct 1, 2019
Merged

fix(material-experimental/slider): incorrectly rendering extra background #17207

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
12 changes: 7 additions & 5 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 @@ -77,18 +77,15 @@ export class MatSliderChange {
templateUrl: 'slider.html',
styleUrls: ['slider.css'],
host: {
// The standard Angular Material slider has the capability to dynamically toggle
// whether tick markers should show or not. Therefore we need to make sure that
// the MDC slider foundation is able to render tick markers. We dynamically toggle
// them based on the specified "tickInterval" input.
'class': 'mat-mdc-slider mdc-slider mdc-slider--display-markers',
'class': 'mat-mdc-slider mdc-slider',
'role': 'slider',
'aria-orientation': 'horizontal',
// The tabindex if the slider turns disabled is managed by the MDC foundation which
// dynamically updates and restores the "tabindex" attribute.
'[attr.tabindex]': 'tabIndex || 0',
'[class.mdc-slider--discrete]': 'thumbLabel',
'[class.mat-slider-has-ticks]': 'tickInterval !== 0',
'[class.mdc-slider--display-markers]': 'tickInterval !== 0',
'[class.mat-slider-thumb-label-showing]': 'thumbLabel',
'[class.mat-slider-disabled]': 'disabled',
'[class.mat-primary]': 'color == "primary"',
Expand Down Expand Up @@ -464,6 +461,11 @@ export class MatSlider implements AfterViewInit, OnChanges, OnDestroy, ControlVa

/** Method that ensures that track markers are refreshed. */
private _refreshTrackMarkers() {
// MDC only checks whether the slider has markers once on init by looking for the
// `mdc-slider--display-markers` class in the DOM, whereas we support changing and hiding
// the markers dynamically. This is a workaround until we can get a public API for it. See:
// https://github.com/material-components/material-components-web/issues/5020
(this._foundation as any).hasTrackMarker_ = this.tickInterval !== 0;
this._foundation.setupTrackMarker();
}

Expand Down