Angular2 with jQuery-ui Slider

Question

I am trying to use jQuery-ui slider with angular2. I would like the "slideValue" variable to display the value of the slider, but I cannot figure out how to bind my model or variable from angular to the slider. Here is my slider component:

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

The code is available here:

https://github.com/nerg/slider

I would like to be able to use any “vertical slider” with Angular2, so if there is another viable solution, I wonder (I check the material, but it doesn’t seem “angular2 ready and only horizontal slider”.

Answer 1

You need to use the correct context ( this ) inside the slide callback. Arrow function will do the trick in this case:

 @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

I was looking for something similar and came across this:

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

Not 100% polished and the github activity behind it looks thin, but closest to the angular2 component, which seems to exist at the time of this writing.