Style the Angular Material Slider so that it is thicker / taller
You can try to add this CSS to global style:
.mat-slider.mat-slider-horizontal .mat-slider-wrapper {
top: 18px;
}
.mat-slider.mat-slider-horizontal .mat-slider-track-wrapper {
height: 12px;
border-radius: 10px
}
.mat-slider.mat-slider-horizontal .mat-slider-track-background,
.mat-slider.mat-slider-horizontal .mat-slider-track-fill {
height: 100%;
}
.mat-slider.mat-slider-horizontal .mat-slider-track-fill {
background-color: blue;
}
.mat-accent .mat-slider-thumb {
height: 30px;
width: 30px;
background-color: white;
border: solid 2px gray;
bottom: -20px;
right: -20px;
}
.mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb {
background-color: white;
}
STACKBLITZ
if you need to have these styles in any component's CSS file with default encapsulation, just add ::ng-deep
before each CSS rule (but be aware of its long going deprecation, so check it with each new versions of Angular):
::ng-deep .mat-slider.mat-slider-horizontal .mat-slider-wrapper {
top: 18px;
}
::ng-deep .mat-slider.mat-slider-horizontal .mat-slider-track-wrapper {
height: 12px;
border-radius: 10px
}
...
if using SASS, just wrap your code with ::ng-deep
::ng-deep {
.mat-slider.mat-slider-horizontal .mat-slider-wrapper {
top: 18px;
}
.mat-slider.mat-slider-horizontal .mat-slider-track-wrapper {
height: 12px;
border-radius: 10px
}
...
}
Please note, that this way your CSS will affect global CSS scope.
This works for me
.mat-slider-thumb {
background-color: #3f51b5 !important;
border: none !important;
box-shadow: 0px 0px 15px #000;
outline: 5px solid #fff;
}
.mat-slider-track-fill {
background-color: #3f51b5 !important;
}
.mat-slider-track-fill,
.mat-slider-wrapper,
.mat-slider-track-wrapper,
.mat-slider-track-background {
height: 10px !important;
border-radius: 10px;
}
Demo: STACKBLITZ
The most direct solution is probably to use transform
. Something like:
my-slider {
transform: scale(2);
}
See MDN for more details: https://developer.mozilla.org/en-US/docs/Web/CSS/transform