function is not called from change event using jquery ui slider in angular

Question

I am using jQuery UI slider in Angular and slider is initialized and being slide properly.however, when i call another function from change event then its not called and giving error as below :

TypeError: this.getSelected is not a function

HTML :

component.ts :

ngAfterViewInit(){
    $("#rangeSlider1").slider({
           range: true,
            min: 0,
            max: 333,
            step: 10,
            values: [0, 333],
         change: function(event,ui){
              this.getSelected(ui);
         }
    })
}

getSelected(){
   // further actions need to execute on change of the slider.
}

Here, getSelected() is another function which i need to call when slider range is change, but this gives me an error as mentioned above. Please note, I can't put the whole code of getSelected function to slider initialization.

Thank you!

Suren Srapyan · Accepted Answer · 2018-08-15 06:59:46Z

1

In the change function this does not refer to the component, instead of that it refers to undefined.

You need to use arrow function which preserves the outer this.

change: (event, ui) => {
    this.getSelected(ui);
}

answered Aug 15, 2018 at 6:59

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

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

Collectives™ on Stack Overflow

function is not called from change event using jquery ui slider in angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related