function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
EldonEldon 

Cannot fire event from nouislider onchange.

Hi,

I am trying to fire a lightning event from my nouislider function. It was working a while ago. But now it stopped working all of a sudden.
Below is my lightning component part,
 
<aura:component controller="shoponklik.LightningCartApexController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global" >
    
    <ltng:require styles="/resource/shoponklik__w3,/resource/shoponklik__ecart/jquery.nouislider.min.css"	
                  scripts="/resource/shoponklik__ecart/jquery.js,/resource/shoponklik__ecart/jquery.nouislider.all.min.js" 
                  afterScriptsLoaded="{!c.callSlider}"/>
    <style>
        body{
        overflow-x:hidden;
        overflow-y:auto;
        }
    </style>
    
    <aura:handler name="init" value="{!this}" action="{!c.itemList}"></aura:handler>   
    <aura:handler event="c:PriceSelectionChange" action="{!c.filter}"/>
    <aura:handler event="c:SearchKeyChange" action="{!c.filter}"/>

Below is the function that is called after loading nouislider,
 
callSlider:function(component, event, helper) {
        
        var $slider = $("#slider");
       
        var maxProdVal=0;
        var stepsize=0;
        var action=component.get("c.getItemList"); 
        action.setCallback(this, function(response){
            var state= response.getState();            
            var tempItems;
            if (state == "SUCCESS"){
                tempItems=response.getReturnValue();
                for(var i = 0; i<tempItems.length;i++){
                    
                    if(response.getReturnValue()[i].item.UnitPrice>maxProdVal)
                    {
                        maxProdVal=response.getReturnValue()[i].item.UnitPrice;
                       
                        if(maxProdVal>=50000){
                            stepsize=1000;
                            
                        }
                        else if(maxProdVal>=10000 && maxProdVal<50000){
                            stepsize=500;
                            
                        }
                            else if(maxProdVal>=2000 && maxProdVal<10000){
                                stepsize=250;
                            }
                                else if(maxProdVal<2000 && maxProdVal>=1000){
                                    stepsize=100;
                                }
                                    else{
                                        stepsize=50;
                                    } 
                    }
                    /*checking discount*/
                      if(response.getReturnValue()[i].item.shoponklik__Discount__c==null){
                        tempItems[i].disc='false';
                    }
                    else
                    {
                        tempItems[i].disc='true';
                    }
                    
                    
                }
                
                
                component.set("v.Items",tempItems);           
                
                
                
                $slider.noUiSlider({
                    
                    
                    start: [0, maxProdVal],
                    connect: true,
                    step: stepsize,
                    range: {
                        'min': 0,
                        'max': maxProdVal
                    }
                });
                $slider.Link('lower').to('-inline-<div class="tooltip"></div>', function ( value ) {
                    
                    $(this).html(
                        '<span>' + '₹ '+(value / 1) + '</span>'
                    );
                });
                $slider.Link('upper').to('-inline-<div class="tooltip"></div>', function ( value ) {
                    $(this).html(
                        '<span>' + '₹ '+(value / 1) + '</span>'
                    );
                });
                $slider.on({
                    change: function(event){
                        var minMax =  $slider.val();
                        
                        component.set("v.minprice",minMax[0]);
                        component.set("v.maxprice",minMax[1]);
                        
                         $A.enqueueAction(action);
        var myEvent2 = $A.get("e.shoponklik:PriceSelectionChange");
                        myEvent2.fire();
                     
                    }
                       
                });
               
            }});
                
    },

But it is showing the following error when i change the slider that is onchange.

Uncaught TypeError: Cannot read property 'fire' of undefined throws at components
That is the line myEvent2.fire();  is throwing error.

Any help would be appreciated