noUi-state-drag不会在mouseout后删除

时间:2017-10-26 20:53:05

标签: angular nouislider

我创建了一个日期范围滑块,当引脚重叠并且我拖着时,两个引脚都在一起移动。

当我检查noUi-state-drag时,我鼠标移除时没有删除。

我一直试图找到一个解决方案但却无法找到它。请帮忙

Nouislider HTML

Nouislider组件



@ViewChild('nouislider') nouislider: any;
@ViewChild('nouislider') thisDom: ElementRef;

constructor(elementRef: ElementRef, renderer: Renderer) {
  this.elementRef = elementRef;
  this.renderer = renderer;
}

ngAfterViewInit() {
  let updateRangeForPips = [this.rangeStartValue];
  let oneDayInMs = 86400000;
  let monthNamesWithDays = [
    "Jan|31", "Feb|28|29", "Mar|31",
    "Apr|30", "May|31", "Jun|30", "Jul|31",
    "Aug|31", "Sep|30", "Oct|31",
    "Nov|30", "Dec|31"
  ];

  this.nouislider.slider.pips({
    mode: 'values',
    values: updateRangeForPips,
    density: 4,
    format: {
      to: function(value) {
        let monthNames = [
          "Jan", "Feb", "Mar",
          "Apr", "May", "Jun", "Jul",
          "Aug", "Sep", "Oct",
          "Nov", "Dec"
        ];
        let pipDate = new Date(value);
        let day = pipDate.getDate();
        let year = pipDate.getFullYear();
        let monthIndex = pipDate.getMonth();
        let dateStringPip = monthNames[monthIndex] + " " + year.toString().substring(2, 4);
        return dateStringPip;
      }
    }
  });

}

ngOnInit() {
  this.step = 86400000; // milliseconds in one day
  this.days = "Drag Slider";

  this.format = {
    from(value: number): number {
      return value;
    },
    to(value: number): string {
      let convertedDate = new Date(value);
      let d = moment.utc(convertedDate).format('MM/DD/YYYY');
      return d;
    }
  };
  this.someRange = this.loadDateSliderRangeValue;
  // this.onSlide();
}

<nouislider #nouislider class="nouislider-wrapper" [step]="step" [format]="format" [tooltips]="[ true , true ]" [connect]="true" [min]="rangeStartValue" [max]="rangeEndValue" [(ngModel)]="someRange" behaviour="drag" [limit]="dateRangeLimit">
</nouislider>
&#13;
&#13;
&#13;

0 个答案:

没有答案