angular - ng5-slider 捕捉焦点事件

Question

我正在使用 Angular 8 和 ng5-slider。我想知道是否有任何方法可以捕捉滑块焦点事件。

我需要创建的内容：

在关注 minValue/maxValue 点（在滑块上）时，我想显示一个日期选择器。

app.component.ts

import { Component, EventEmitter } from '@angular/core';
import { Options, PointerType } from 'ng5-slider';

@Component({
  selector: 'app-trigger-focus-slider',
  templateUrl: './trigger-focus-slider.component.html'
})
export class TriggerFocusSliderComponent {
  triggerFocus: EventEmitter<PointerType> = new EventEmitter<PointerType>();
  minValue: number = 20;
  maxValue: number = 80;
  options: Options = {
    floor: 0,
    ceil: 100,
    step: 5
  };

  PointerType: any = PointerType;

  focusSlider(pointerType: PointerType): void {
    this.triggerFocus.emit(pointerType);
  }
}

app.component.html

<p>
  <button type="button" class="btn btn-outline-primary" (click)="focusSlider(PointerType.Min)">Focus min pointer</button>
  <button type="button" class="btn btn-outline-primary" (click)="focusSlider(PointerType.Max)">Focus max pointer</button>
</p>

<ng5-slider [(value)]="minValue" [(highValue)]="maxValue" [options]="options" [triggerFocus]="triggerFocus"></ng5-slider>

免责声明

我是 Angular 的新手

标签： angulardatepickerslider