Angular2 with Jquery-ui Slider

Question

I try to use Jquery-ui slider with angular2. I would like to have the variable "slideValue" displaying the value of the slider but I can't figure out how to bind my model or a 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 another viable solution exists, I'm interested (i've check material but it doesn't seem to be "angular2" ready and only horizontal slider).

Answer 1

You need to use correct context ( this ) inside of 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 github activity behind it looks thin, but closest thing to a native angular2 component that seems to exist at the time of this writing.