4

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

tc01
  • 181
  • 4
  • 12
  • Is https://material.angular.io/components/slider/overview not sufficient? – Daniel Turcich Feb 12 '19 at 15:16
  • yea thanks i have read that page, but not sure how to customise the interval bar and to always show the value – tc01 Feb 12 '19 at 15:20
  • I don't know where your video clip comes from, but continuous display of tick labels is not part of the current material design slider specification (https://material.io/design/components/sliders.html) and is not supported by the Angular Material Slider. – G. Tranter Feb 12 '19 at 17:24
  • @G.Tranter The video is from https://material.io https://material.io/design/components/cards.html#actions (UI controls), I am surprised that there is no official document about how to implement that – tc01 Feb 13 '19 at 15:37
  • There is no official document on how to do it because the material design site is about design not implementation. And since Angular Material only implements the specification, and the specification does not include tick labels, there is no support for doing that therefore no documentation. It would be up to the user to place labels below the slider if required. – G. Tranter Feb 13 '19 at 18:47
  • Thank you, that's why I am trying to ask here if anyone knows how to implement something like that on our own – tc01 Feb 15 '19 at 10:13
  • 3
    lol people here are amazing. Easy to chase away new members with this sort of reception. – Rogelio Jul 18 '19 at 11:42
  • 1
    @Roj Its true. I've pasted what I have done below, although it is a bit hacky – timhc22 Dec 03 '19 at 18:32
  • @tc01 Did you manage to implement this? It's not just ticks you're after but also the value labels below the ticks, right? – Alexander Burakevych Sep 28 '21 at 00:51
  • Coming to this in 2023, re: mat slider not supporting ticks. This is what the current docs say: `By default, sliders do not show tick marks along the thumb track. This can be enabled using the showTickMarks attribute.` https://material.angular.io/components/slider/overview. They even have an example where you can toggle the tickmarks on the example page (again, May 2023) but it does nothing that I can see. – Bob Ramsey May 24 '23 at 13:35
  • Ok, cancel that. I think the issue is that even when viewing them, they are too small to be useful. https://stackblitz.com/edit/angular-material-slider-ticks?file=src%2Fapp%2Fslider-configurable-example.html has a better example than the material site. – Bob Ramsey May 24 '23 at 13:46

2 Answers2

3

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

timhc22
  • 7,213
  • 8
  • 48
  • 66
0

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();
        }
    }
}
Michael Jedd
  • 44
  • 2
  • 7
  • 1
    Automatically focusing on the slider will break your page's navigation flow (for users using keyboard navigation and screen readers) and will negatively affect accessibility. MatSlider uses encapsulation.NONE which means you can target its CSS selectors as global CSS classes. So you should be able to change opacity by overriding them. – Alexander Burakevych Sep 28 '21 at 00:06