CODEWITHSUNDEEP
angularsliderjquery-ui-slider
TAVVA
TAVVA

Reputation: 309

angular 4 : jquery slider is not a function using component

 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.

Upvotes: 1

Views: 2146

Answers (1)

SrAxi
SrAxi

Reputation: 20005

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

Upvotes: 1

Related Questions