Angular2 с JQuery-ui Slider

Question

Я пытаюсь использовать слайдер JQuery-ui с угловым2. Я хотел бы, чтобы переменная «slideValue» отображала значение ползунка, но я не могу понять, как привязать мою модель или переменную от углового до ползунка. Вот мой слайдер компонент:

import {Component, ElementRef, Inject, OnInit} from 'angular2/core'; 

declare var jQuery:any; 

@Component({ 
    selector: 'slider', 
    template: 
    ` 
    <input type="text" [(ngModel)]="slideValue" id="amount" required placeholder="Enter a name here"> 
    <div id="slider"></div> 
    <h2>slideValue = {{slideValue}}</h2> 
    ` 
}) 

export class Slider implements OnInit { 
    elementRef: ElementRef; 
    slideValue: number; 

    constructor(@Inject(ElementRef) elementRef: ElementRef) { 
     this.elementRef = elementRef; 
    } 

    ngOnInit() {   
     jQuery(this.elementRef.nativeElement).find("#slider").slider({ 
      range: false, 
      orientation: "vertical", 
      min: 0, 
      max: 100, 
      value: 60, 
      slide: function(event, ui) { 
      this.slideValue = ui.value; //doesn't seem to work 
      $("#amount").val(ui.value); 
      } 
     }); 

    } 
} 

код доступен здесь:

https://github.com/nerg/slider

Я хотел бы иметь возможность использовать любой «вертикальный слайдер» с Angular2, поэтому, если другое жизнеспособное решение существует , Мне интересно (я проверяю материал, но он не выглядит «угловым2» и только горизонтальным слайдером).

Answer 1

Необходимо использовать правильный контекст (this) внутри обратного вызова слайдов. Функция Стрелки будет делать трюк в этом случае:

@Component({ 
    selector: 'slider', 
    template: ` 
     <input type="text" [(ngModel)]="slideValue" class="amount" required placeholder="Enter a name here"> 
     <div class="slider"></div> 
     <h2>slideValue = {{slideValue}}</h2> 
    ` 
}) 
export class Slider implements OnInit { 
    elementRef: ElementRef; 
    slideValue: number; 

    constructor(@Inject(ElementRef) elementRef: ElementRef) { 
     this.elementRef = elementRef; 
    } 

    ngOnInit() { 
     var $amount = jQuery(this.elementRef.nativeElement).find(".amount"); 
     jQuery(this.elementRef.nativeElement).find(".slider").slider({ 
      range: false, 
      orientation: "vertical", 
      min: 0, 
      max: 100, 
      value: 60, 
      slide: (event, ui) => { 
       this.slideValue = ui.value; 
       $amount.val(ui.value); 
      } 
     }); 
    } 
} 

Answer 2

Я искал что-то подобное, и наткнулась на это:

https://www.npmjs.com/package/ng2-slider-component

Не 100% полированная и GitHub деятельности за это выглядит тонким, но ближайшая вещь к натурному угловому компоненту, который, кажется, существует на момент написания этой статьи.