Я пытаюсь использовать слайдер Jquery-UI с Angular2. Я хотел бы, чтобы переменная «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, поэтому, если существует другое жизнеспособное решение, я заинтересован (я проверил материал, но он не готов для «angular2» и только горизонтальный слайдер) ,