Skip to content

Commit 5ea614d

Browse files
crisbetommalerba
authored andcommitted
fix(slider): invisible in high contrast mode (#9792)
Fixes the slider not being visible if the user has high contrast mode turned on.
1 parent e65f007 commit 5ea614d

File tree

1 file changed

+13
-0
lines changed

1 file changed

+13
-0
lines changed

src/lib/slider/slider.scss

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
@import '../core/style/variables';
22
@import '../core/style/vendor-prefixes';
3+
@import '../../cdk/a11y/a11y';
34

45

56
// This refers to the thickness of the slider. On a horizontal slider this is the height, on a
@@ -298,6 +299,12 @@ $mat-slider-focus-ring-size: 30px !default;
298299
.mat-slider-ticks-container {
299300
height: $mat-slider-track-thickness;
300301
width: 100%;
302+
303+
@include cdk-high-contrast {
304+
height: 0;
305+
outline: solid $mat-slider-track-thickness;
306+
top: $mat-slider-track-thickness / 2;
307+
}
301308
}
302309

303310
.mat-slider-ticks {
@@ -375,6 +382,12 @@ $mat-slider-focus-ring-size: 30px !default;
375382
.mat-slider-ticks-container {
376383
width: $mat-slider-track-thickness;
377384
height: 100%;
385+
386+
@include cdk-high-contrast {
387+
width: 0;
388+
outline: solid $mat-slider-track-thickness;
389+
left: $mat-slider-track-thickness / 2;
390+
}
378391
}
379392

380393
.mat-slider-focus-ring {

0 commit comments

Comments
 (0)