I've been try to integrate a ionic component (ion-range) as a custom widget in survey-js using angular. I am able to display the component successfully but i am not able to catch the event when any change is made to the value.
This is how i've tried to implement the custom widget.
JavaScriptSurvey.JsonObject.metaData.addProperty("radiogroup", {
name: "renderAs",
default: "standard",
choices: ["standard", "slider"]
});
var widget = {
name: "slider",
htmlTemplate: `<ion-item>
<ion-range (ionChange)="changed($event)" min="0" max="5" step="1" pin="true" snaps="true" ticks="true" color="secondary">
</ion-range>
</ion-item>`,
isFit: function(question){
return question["renderAs"] === "slider";
},
afterRender:function(question,el){
var slider =el.getElementsByTagName("ion-range")[0];
slider.ionChange = function(){
console.log("hey");
question.value=slider.value;
console.log(slider.value);
}
}
}
Survey.CustomWidgetCollection.Instance.addCustomWidget(widget);
I am not able to get the slider.ionChange function to run. The ionChange function returns an event, can you please help me guide how i can make it work.
Thankyou.