@change event is not firing with rangeslider.js in vue 3

Question

I'm using rangeslider.js plugin for a custom slider. In vue 3, while I slide/change the the slider value @change event is not firing. How to solve this issue.

HTML:

data(){
    return{
                
        }
    },
    methods:{

        updateChart(chartId, point){
                //will do something
        }
    },
    created(){
            
    },
    mounted(){
            
            
    }

<input
    type="range"
    min="0"
    max="10"
    name="rating"
    id="rating"
    step="1"
    data-ratingslider="true"
    value="0"
    autocomplete="off"
    @change="updateChart(rating)"
/>

I've tested "ng-change" event in angularjs with rangeslider.js which working fine. What's wrong about vue3 ?

Answer 1

applying event dispatch has solved the issue for me.

data(){
return{
            
    }
},
methods:{

    updateChart(chartId, point){
            //will do something
    },
    eventDispatch(element, event) {
            element.dispatchEvent(new Event(event));
    }
},
created(){
        
},
mounted(){
    $(document).on('change', 'input[type="range"]', function(e) {
            _this.slideRatingValue = e.target.value;
            _this.eventDispatch(e.target, e.handleObj.type);
        });         
}

}