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

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

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 2

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 3

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 4

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