ng5-slider关注焦点事件

时间:2019-09-27 10:57:02

标签: angular datepicker slider

我正在使用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的新手

0 个答案:

没有答案