Is there a way in Angular to get a mat-slider with a width less than 128px?

Question

I haven't been able to find any ways to get a mat-slider smaller than 128px wide. Is there a way to do this? I have used transform: scale(); as a temporary solution, but this creates issues with other elements. An example of the type of slider with which I am working can be found here. The css width can be increased, but once you lower it to 128px, it can't get any smaller.

Answer 1

This is because .mat-slider-horizontal has a min-width property of 128px.

You can override this with:

.mat-slider-horizontal {
  min-width: unset;
}

Be aware that the min-width was probably there for good reason and this may introduce other issues.

Here's the updated Stackblitz:

https://stackblitz.com/edit/angular-v5leng?file=src/app/slider-overview-example.css