Question T5048
Visible to All Users

How to bind to onchange event of ionic component?

created 4 years ago

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.

JavaScript
Survey.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.

Answers approved by surveyjs Support

created 4 years ago

Hello,

The custom widget in SurveyJS should be written in platform-independent code. Custom widget is supposed to work on all SurveyJS supported platforms - Angular, jQuery, Knockout, React and Vue.
Thus the

HTML
<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>

is not supposed to work.

Thanks, Serge
SurveyJS Team

    Comments (3)

      Oh, ok, so can you please tell me what other libraries i can use here instead of nouislider or bootstrap slider?

        Hello,

        You can use any pure JavaScript libraries, or libraries with platform-independant dependencies like jQuery or Bootstrap.

        Thanks, Serge
        SurveyJS Team

          Ok, thank you so much for the help.