Angular Slider snap to value

Question

I'm having some trouble figuring out how to make snap spots to different values inside the slider in Angular. Slider:

<mat-slider 
        min="0" max="90" step="1" tickinterval="auto" thumbLabel (input)="positionChanged(component, 'north.dx', $event.value)" (input)="positionChanged(component, 'north.dy', $event.value)"
></mat-slider>

I need to have three snap spots: [33, 45, 90].

Link to documentation: Angular mat-slider

Is there a way to do this inside the html? I hope someone is able to help me. Thanks in advance!

Answer 1

HTML:

    <mat-slider #screen
      thumbLabel
      [displayWith]="formatLabel"
      tickInterval="1000"
      min="1"
      max="100000"></mat-slider>

    <div id="download">
      <img #canvas>
      <a #downloadLink></a>
    </div>

In component.ts:

import { Component } from "@angular/core";

@Component({
  selector: "slider-formatting-example",
  templateUrl: "slider-formatting-example.html",
  styleUrls: ["slider-formatting-example.css"]
})
export class SliderFormattingExample {
  @ViewChild('screen') screen: ElementRef;
  @ViewChild('canvas') canvas: ElementRef;
  @ViewChild('downloadLink') downloadLink: ElementRef;
  formatLabel(value: number) {
    if (value >= 1000) {
      console.log(value); // Your slider value is here
      if (value === 33) {
       html2canvas(this.screen.nativeElement).then(canvas => {
         this.canvas.nativeElement.src = canvas.toDataURL();
         this.downloadLink.nativeElement.href = 
         canvas.toDataURL('image/png');
         this.downloadLink.nativeElement.download = '33.png';
         this.downloadLink.nativeElement.click();
       });

      } else if (value === 45) {
      html2canvas(this.screen.nativeElement).then(canvas => {
         this.canvas.nativeElement.src = canvas.toDataURL();
         this.downloadLink.nativeElement.href = 
         canvas.toDataURL('image/png');
         this.downloadLink.nativeElement.download = '45.png';
         this.downloadLink.nativeElement.click();
       });
      } else if (value === 90) {
       html2canvas(this.screen.nativeElement).then(canvas => {
          this.canvas.nativeElement.src = canvas.toDataURL();
          this.downloadLink.nativeElement.href = 
          canvas.toDataURL('image/png');
          this.downloadLink.nativeElement.download = 'marble-diagram.png';
          this.downloadLink.nativeElement.click();
       });
      }
      return Math.round(value / 1000) + "k";
    }
    return value;
  }
}

Please find the working stackblitz answer here. Now along with it you need to have the html2canvas library installed in the project Please find html2canvas here. Its fairly straight forward to take snapshot in it. I'll share the stackblitz sample of taking snapshot with you here. What you need to do is programmtically take the snapshot if it is the having the value of 33,45,90 which I have done in the relevent if and else if blocks in the answer.