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

user_8946627 0
Viewed 22161

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.

enter image description here

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)

angular-material angular css
5 Answers

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.

user_32440640
user_103607620

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

user_110214040

Just overwrite mat css with this

.mat-slider-track-fill,
.mat-slider-wrapper,
.mat-slider-track-wrapper,
.mat-slider-track-background {
    height: 5px !important;
}
user_30661420

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);
}
user_49592370
Related