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).

See PrimeNG Slider as a reference. primefaces.org/primeng/#/slider — Cagatay Civici
– Cagatay Civici, Commented Feb 16, 2016 at 17:32
That exactly what I was looking for. I search for a while but never find this page. Thanks. — Nerg
– Nerg, Commented Feb 17, 2016 at 13:44
As of the current ng2 forms 0.2.0 release (corresponding to rc4), the slider's value property is required to be defined (null is ok), whereas previous ng2 forms versions would also allow the value to be undefined. This came up when I was migrating a PrimeNG ng2 demo app to rc4 to see what broke, and starting to drag a slider with an undefined initial value started throwing exceptions. — rob3c
– rob3c, Commented Jul 20, 2016 at 18:56

dfsq · Accepted Answer · 2016-02-11 10:27:42Z

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

July.Tech · Accepted Answer · 2016-08-04 19:17:06Z

0

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.

answered Aug 4, 2016 at 19:17

July.Tech

1,38617 silver badges22 bronze badges

Collectives™ on Stack Overflow

Angular2 with Jquery-ui Slider

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related