Angular2 mit Jquery-Ui Slider

Question

Ich versuche, Jquery-Ui-Schieberegler mit angular2 zu verwenden. Ich hätte gerne die Variable "slideValue", die den Wert des Sliders anzeigt, aber ich kann nicht herausfinden, wie ich mein Modell oder eine Variable von eckig an den Slider binden kann. Hier ist meine Slider-Komponente:

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); 
      } 
     }); 

    } 
} 

Der Code hier verfügbar:

https://github.com/nerg/slider

Ich möchte in der Lage sein zu verwenden, jede „vertikalen Schieberegler“ mit Angular2, so dass, wenn eine andere tragfähige Lösung existiert , Ich bin interessiert (Ich habe Material überprüft, aber es scheint nicht zu sein "angular2" bereit und nur horizontale Schieberegler).

Answer 1

Sie müssen den korrekten Kontext (this) innerhalb des Folienrückrufs verwenden. Pfeil-Funktion wird der Trick in diesem Fall:

@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

Ich war auf der Suche nach etwas ähnliches und stieß auf diese:

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

nicht zu 100% poliert und Github Aktivität dahinter sieht dünn, aber am nächsten zu einer nativen angular2 Komponente, die zum Zeitpunkt des Schreibens zu existieren scheint.