cssangularangular-materialmat-slider

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

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.

Solution

  • 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