CODEWITHSUNDEEP
angularangular-material
tc01
tc01

Reputation: 181

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

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?

Slider

Upvotes: 4

Views: 9312

Answers (2)

Michael Jedd
Michael Jedd

Reputation: 44

I noticed that even with the opacity set to 1 as in the previous answer, the ticks would only show after hovering my cursor over the slider.

My solution was to reference the slider(s) using a ViewChild and then call this.slider.focus() in the ngAfterViewInit life-cycle hook, like so:

export class MyComponent implements OnInit, AfterViewInit {
    @ViewChild('slider') public slider: MatSlider;

    constructor() {}

    ngAfterViewInit(): void {
        if (this.slider) {
            this.slider.focus();
        }
    }
}

Upvotes: 0

timhc22
timhc22

Reputation: 7451

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

Upvotes: 3

Related Questions