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!

this is not possible with current implementation of `mat-slider` — Plochie, Dec 24 '19 at 08:35
I believe the problem is, your step can't be calculated since it's not incremental, I think you can't do what you want with the current implementation of mat-slider — Alann, Dec 24 '19 at 08:36
I'm not clear of what you are trying to archieve here. can you elaborate more please? — Selaka Nanayakkara, Dec 24 '19 at 08:50
@SelakaN Just a slider (with angular) with snap spots to the values `33, 45, 90`. Thats it. — mHvNG, Dec 24 '19 at 08:54
You basically need to capture the slider value and if it is 33 or 45 or 90 take a snapshot right? — Selaka Nanayakkara, Dec 24 '19 at 08:57
Posted answer. @mHvNG Please check and mark it as the correct answer if it helps. Thanks in advance — Selaka Nanayakkara, Dec 24 '19 at 09:23
I've answered the question accordingly can you check and give it a upvote @MuhammadUmarFarooq Practiacally wrote the code myself on this. Highly appreciate a upvote — Selaka Nanayakkara, Dec 24 '19 at 10:31

Selaka Nanayakkara · Accepted Answer · 2019-12-24T09:19:36.967

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.

Angular Slider snap to value

1 Answers1