Style the Angular Material Slider so that it is thicker / taller - css

Question

I'm having problems finding the magic sauce here.. It doesn't look like the API supports it, so I guess I'm looking for some CSS to make the slider bigger.
I am getting the one on the left, but I would like to style it like the one on the right? Any CSS tricks or has anyone done this before.
Specifically the height of the 'bar'.
there are a million things set to height: 2px. i tried upping all of them but nothing changed.. i guess maybe it's a border or something else?
Thanks in advance!
StackBlitz:
https://stackblitz.com/angular/kkmmddyaegp?file=app%2Fslider-overview-example.css
(Thanks #Andriy)

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

Just overwrite mat css with this
.mat-slider-track-fill,
.mat-slider-wrapper,
.mat-slider-track-wrapper,
.mat-slider-track-background {
height: 5px !important;
}

Answer 5

this works for me
:root {
--slider-height: 28px;
}
.mdc-slider .mdc-slider__tick-marks {
height: var(--slider-height);
}
.mdc-slider .mdc-slider__track--inactive,
.mdc-slider .mdc-slider__track {
height: calc(var(--slider-height) - 2px);
}
.mdc-slider .mdc-slider__track--active {
height: var(--slider-height);
}
.mdc-slider .mdc-slider__track--active_fill {
height: var(--slider-height);
border-top-width: var(--slider-height);
}
.mdc-slider .mdc-slider__thumb-knob {
height: calc(var(--slider-height) + 9px);
width: calc(var(--slider-height) + 9px);
}

Answer 6

with the latest migration to material web components you can customize the respective css variables e.g. like that:
:root {
--mdc-slider-inactive-track-height: 2px;
--mdc-slider-active-track-height: 4px;
}