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

问题

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)

回答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

回答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

来源：https://stackoverflow.com/questions/52339591/style-the-angular-material-slider-so-that-it-is-thicker-taller

标签

css

angular

angular-material