Angular Material Slider - how to always show tick interval with values and customization?

Question

I am using the Angular Material Slider, it works fine but I cannot find any tutorial and am not sure how to do some advance customization to the slider like those on material.io and always show tick interval with values.

Does anyone have an example on how to implement something similar? Or is there any official tools for this?

Answer 1

Feels a bit hacky, but I used something like this:

:host ::ng-deep mat-slider.mat-slider.mat-slider-horizontal .mat-slider-ticks {
  // make ticks fill full height
  height: 20px;
  // this will force show the ticks
  opacity: 1;
  background-size: 10.101% 2px !important;
  transform: translateZ(0px) translateX(5.05051%); // I adjusted my slider to be thicker, so the correct values for you here may be different
}

In the SCSS file of my component.

Alternatively, you can remove the :host ::ng-deep part and put the styles into styles.scss (which may be better practice, because apparently this method is being/is deprecated: How to style child components from parent component's CSS file?)

This may also be useful: Style the Angular Material Slider so that it is thicker / taller