Привязка углового слайдера к значению

Question

У меня возникли проблемы с тем, чтобы понять, как сделать точки привязки для разных значений внутри ползунка в Angular. Слайдер:

<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>

Мне нужно иметь три точки привязки:[33, 45, 90].

Ссылка на документацию: Угловой мат-слайдер

Есть ли способ сделать это внутри html? Надеюсь, кто-нибудь сможет мне помочь. Заранее спасибо!

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>

В 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;
  }
}

Вы можете найти рабочий stackblitz ответ здесь. Теперь вместе с ним вам понадобитсяhtml2canvas библиотека, установленная в проекте. Найдите html2canvas здесь. В нем довольно просто сделать снимок. Я поделюсь образец stackblitz взятия снимка с вами здесь. Что вам нужно сделать, так это программно сделать снимок, если он имеет значение33,45,90 что я сделал в соответствующем if а также else if блоки в ответ.

Answer 2

Вы можете попробовать что-то вроде того, что я ответил на вопрос о переполнении стека, то есть ng5-slider