Input Rating Lightning Component

inputRating.cmp

<aura:component >
    <ltng:require scripts="/resource/rating/vendor/jquery.js,/resource/rating/lib/jquery.raty.js"
        styles="/resource/rating/lib/jquery.raty.css" 
        afterScriptsLoaded="{!c.afterScriptsLoaded}"/>
 
    <aura:attribute name="value" type="Integer" required="true"/>
    <aura:attribute name="ready" type="Boolean" default="false"/>
    
    <div aura:id="rating"></div>
</aura:component>

inputRatingController.js

({
	afterScriptsLoaded : function(component, event, helper) {
        	component.set("v.ready", true);
        	helper.createRating(component);
	}
})

inputRatingHelper.js

({
	createRating : function(component) {
        	// check in case coming from afterRender,
        	// before scripts are loaded
        	var ready = component.get("v.ready");
        	if (ready === false) {
        	    return;   
		}

		var ratingElem = component.find("rating").getElement();
        
		$(ratingElem).raty({
            		starType: "i",            
            		score: component.get("v.value"),
            		click: function(score, evt) {
                		component.set("v.value", score);
            		}
        	});
	}
})

inputRatingRenderer.js

({
	afterRender: function(component, helper) {
		this.superAfterRender(component, helper);
		helper.createRating(component);
    	}
})