angular 4 : jquery slider is not a function using component

Question

 import { Component, ElementRef, Inject, AfterViewInit, Input } from '@angular/core';
declare var jQuery:any;

@Component({
  selector: 'app-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.css']
})
export class SliderComponent implements AfterViewInit {

@Input() slideValue: number;    
elementRef: ElementRef;
visibility = 'hidden';
@Input() index: number;

constructor(@Inject(ElementRef) elementRef: ElementRef) {
  this.elementRef = elementRef;
}

updSlider() {
  jQuery(this.elementRef.nativeElement).find("#slider")
  .slider("option", "value", this.slideValue);      
}

ngAfterViewInit() { 
  jQuery(this.elementRef.nativeElement).find("#slider").slider({
    range: "min",
    orientation: "vertical",
    min: 0,
    max: 300,
    animate: true,
    step: 1,
    value: this.slideValue,
    slide: ( event, ui ) => {
      this.slideValue = ui.value;
      this.visibility = "visible";
      jQuery(this.elementRef.nativeElement).find(".ui-slider-range").css({"background": "#FFFFcc"});
    }
  });
}

     ngOnInit() {
   }

}

slider.component.ts

When i called it from my main component.

Its thowing jquery.slider is not a function.

ERROR Error: Uncaught (in promise): TypeError: jQuery(...).find(...).slider is not a function

I tried normal jquery slider also . Here also got same issue. So i tried with angular2 component from the below example.

https://plnkr.co/edit/ZoquO4A9Uk5t6Unh50gZ?p=preview

I got same issue.

Im using webpack version which is angular 4.

Any help on this can appreciate.

In plunker its working fine. But unbale to run in my server. — TAVVA
– TAVVA, Commented Jun 3, 2017 at 6:33

SrAxi · Accepted Answer · 2017-06-01 10:43:08Z

1

If you use Angular-CLI:

angular-cli.json:

 "scripts": [
            "../path/jquery-ui-slider.js"
     ],

Where you are using jQuery UI Slider:

 import '../../../path/jquery-ui-slider.js';

Hope it helps, let me know how it goes!

Good luck mate! ;)

answered Jun 1, 2017 at 10:43

SrAxi

20.1k11 gold badges50 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SrAxi Over a year ago

@user2215155 I am glad I was able to solve your issue! If it's the correct answer, please, mark it as such, so people can recognize it and try to solve their similar issues. Good day! ;)

Collectives™ on Stack Overflow

angular 4 : jquery slider is not a function using component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related