Jquery-ui स्लाइडर

Question

के साथ कोणीय 2 कोणीय 2 के साथ Jquery-UI स्लाइडर का उपयोग करने का प्रयास करें। मैं स्लाइडर के मान को प्रदर्शित करने वाला चर "स्लाइडवैल" रखना चाहता हूं लेकिन मैं यह नहीं समझ सकता कि मेरे मॉडल या एक चर को कोणीय से स्लाइडर से कैसे बांधें। है यहाँ उपलब्ध

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 गतिविधि के पीछे यह पतली है, लेकिन इस लेखन के समय मौजूद मूल कोणीय 2 घटक के निकटतम चीज़।