diff --git a/src/material/slider/slider-thumb.scss b/src/material/slider/slider-thumb.scss index 48a4acb23f7f..e5cd1605936a 100644 --- a/src/material/slider/slider-thumb.scss +++ b/src/material/slider/slider-thumb.scss @@ -2,12 +2,3 @@ height: 100%; width: 100%; } - -.mat-mdc-slider .mdc-slider__tick-marks { - justify-content: start; - .mdc-slider__tick-mark--active, - .mdc-slider__tick-mark--inactive { - position: absolute; - left: 2px; - } -} diff --git a/src/material/slider/slider.html b/src/material/slider/slider.html index 23329ba40b40..794cd7ad1bde 100644 --- a/src/material/slider/slider.html +++ b/src/material/slider/slider.html @@ -11,9 +11,7 @@
diff --git a/src/material/slider/slider.scss b/src/material/slider/slider.scss index 0e282262ca1a..79d6f533fcde 100644 --- a/src/material/slider/slider.scss +++ b/src/material/slider/slider.scss @@ -282,11 +282,17 @@ $_mat-slots: (tokens-mat-slider.$prefix, tokens-mat-slider.get-token-slots()); display: flex; height: 100%; justify-content: space-between; - padding: 0 1px; + padding: 0 4px; position: absolute; width: 100%; } +.mdc-slider__tick-mark--active, +.mdc-slider__tick-mark--inactive { + flex-shrink: 0; + margin: -2px; +} + .mdc-slider__tick-mark--active, .mdc-slider__tick-mark--inactive { @include token-utils.use-tokens($_mdc-slots...) { diff --git a/src/material/slider/slider.ts b/src/material/slider/slider.ts index 74808591eb4a..96855c32980d 100644 --- a/src/material/slider/slider.ts +++ b/src/material/slider/slider.ts @@ -587,13 +587,6 @@ export class MatSlider implements AfterViewInit, OnDestroy, _MatSlider { trackStyle.transform = styles.transform; } - /** Returns the translateX positioning for a tick mark based on it's index. */ - _calcTickMarkTransform(index: number): string { - // TODO(wagnermaciel): See if we can avoid doing this and just using flex to position these. - const translateX = index * (this._tickMarkTrackWidth / (this._tickMarks.length - 1)); - return `translateX(${translateX}px`; - } - // Handlers for updating the slider ui. _onTranslateXChange(source: _MatSliderThumb): void { diff --git a/tools/public_api_guard/material/slider.md b/tools/public_api_guard/material/slider.md index 3ef7b8ab020b..0d2a1be602d1 100644 --- a/tools/public_api_guard/material/slider.md +++ b/tools/public_api_guard/material/slider.md @@ -28,7 +28,6 @@ export class MatSlider implements AfterViewInit, OnDestroy, _MatSlider { _cachedLeft: number; // (undocumented) _cachedWidth: number; - _calcTickMarkTransform(index: number): string; // (undocumented) readonly _cdr: ChangeDetectorRef; color: ThemePalette;