Handling events from multiple sliders on the same page

[Kaj Toivonen]

I have multiple instances of ejs-slider on a ASP.NET Core MVC view. These sliders are created in a @for in the view loop and the change and changed events reference scripts on the same view. When the event handler function is called how can I know which slider triggered the event?

[LeoLavanya Dhanaraj]

Hi Kaj,

Greetings from Syncfusion support.

We have validated the reported query with the Slider sample in the ASP.NET Core platform. Here, we've used a for-loop method with a unique id to render multiple sliders. By using this keyword within the change and changed events, you can get the ID of the currently selected Slider. For your reference, we have attached the sample.

Refer the below code snippets.

[Index.cshtml]

@for (int i = 1; i <= 10; i++)

{

    var SliderID = "_Slider" + i;

    <ejs-slider id="@SliderID" value="0" min="0" max="11"  changed="onChanged" change="onChange">

        …

    </ejs-slider>

}

 

<script>

    function onChanged(args) {

        console.log("Current slider id name (changed event): " + this.element.id);

    }

    function onChange(args) {

        console.log("Current slider id name (change event): " + this.element.id);

    }

</script>

Please check the attached sample and get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj

Attachment: SliderLoop_1a0b6678.zip