Element Interaction Guide: Events and Actions

Aryel
Written by AryelLast updated 7 hours ago

Effective interactive design relies on a clear mapping between Events (triggers) and Actions (system responses). This guide provides a comprehensive overview of our current component capabilities, designed to serve as a living reference as we scale our project.

Element Matrix

Element

Events (Triggers)

Actions (Responses)

Aryel Analytics

-

Track,

Trigger attention

Button

On render complete,

On click,

On mouse enter,

On mouse leave,

On change visibility

Go to link,

Set visibility,

Set disabled,

Set content,

Set font color,

Set font size,

Set font weight,

Set background color,

Set border color,

Set border width,

Set border radius,

Set border style,

Set shadow,

Set opacity,

Set width,

Set height,

Set position,

Set z index,

Set pointer events

Click Area

On render complete,

On click,

On mouse enter,

On mouse leave

Go to link,

Set interactivity,

Set width,

Set height,

Set position,

Set z index

Compare

On render complete,

On click,

On click left,

On click right,

On start drag,

On drag,

On end drag,

On reveal left,

On reveal right,

On mouse enter,

On mouse leave,

On change visibility

Set visibility,

Set left source,

Set right source,

Set handle source,

Set handle width,

Set handle color,

Set border color,

Set border width,

Set border radius,

Set border style,

Set shadow,

Set opacity,

Set width,

Set height,

Set position,

Set z index,

Set pointer events

Image

On render complete,
On load,
On click,
On set source,
On mouse enter,
On mouse leave,
On change visibility

Set visibility,

Set source,

Set border color,

Set border width,

Set border radius,

Set border style,

Set shadow,

Set opacity,

Set width,

Set height,

Set position,

Set z index,

Set pointer events

Layout Block

On render complete,

On click,

On start press,

On complete press,

On release press,

On swipe up,

On swipe down,

On swipe left,

On swipe right,

On mouse move,

On mouse enter,

On mouse leave,

On change visibility

Set visibility,

Set display,

Set background image,

Set background color,

Set border color,

Set border width,

Set border radius,

Set border style,

Set shadow,

Set opacity,

Set scale,

Set translate,

Set width,

Set height,

Set position,

Set z index,

Set pointer events

Map

On render complete,

On load,

On map click,

On pin click,

On map move,

On map zoom,

On mouse enter,

On mouse leave,

On geolocation allowed,

On geolocation denied,

On change visibility

Set visibility,

Set pin source,

Set pin width,

Set pin height,

Go to starting visualization,

Go to location,

Fit locations,

Set border color,

Set border width,

Set border radius,

Set border style,

Set shadow,

Set opacity,

Set width,

Set height,

Set position,

Set z index,

Set pointer events

Page

-

Go to click out,

Go to page,

Go to next page,

Go to previous page,

Go to first page,

Go to last page,

Play animation,

Pause animation,

Stop animation,

Restart animation,

Play reverse animation

Peep

On render complete,

On click,

On start,

On interaction,

On complete,

On release,

On mouse enter,

On mouse leave,

On change visibility

Set visibility,

Set source,

Set brush size,

Set border color,

Set border width,

Set border radius,

Set border style,

Set shadow,

Set width,

Set height,

Set position,

Set z index,

Set pointer events

Range Slider

On render complete,

On load,

On click,

On set source,

On mouse enter,

On mouse leave,

On change visibility

Set visibility,

Set progress position,

Set handle source,

Set handle width,

Set handle color,

Set background color,

Set border color,

Set border width,

Set border radius,

Set border style,

Set shadow,

Set opacity,

Set width,

Set height,

Set position,

Set z index,

Set pointer events

Rich Text

On render complete,

On click,

On mouse enter,

On mouse leave,

On change visibility

Set visibility,

Set content,

Set font color,

Set font size,

Set font weight,

Set background color,

Set border color,

Set border width,

Set border radius,

Set border style,

Set shadow,

Set opacity,

Set position,

Set z index,

Set pointer events

Slide

On append,

On active,

On mouse-enter,

On mouse-leave

-

Slider

On initialization,

On click slider,

On click active slide,

On click not active slide,

On change slide,

On start drag,

On manual slide change,

On autoplay slide change,

On slide transition start,

On slide transition end,

On navigate to last slide,

On swipe to the beginning,

On swipe to the end,

On slider pagination click,

On change zoom scale,

On start wheel scroll,

On end wheel scroll,

On start autoscroll,

On pause autoscroll,

On slider change direction,

On mouse enter,

On mouse leave,

On change visibility

Set visibility,

Initialize slider,

Go to next slide,

Go to previous slide,

Go to first slide,

Go to last slide,

Set active slide,

Play autoplay,

Pause autoplay,

Stop autoplay,

Play autoscroll,

Stop autoscroll,

Set direction,

Set slides per view,

Zoom in,

Zoom out,

Set zoom,

Set background color,

Set border color,

Set border width,

Set border radius,

Set border style,

Set shadow,

Set opacity,

Set width,

Set height,

Set position,

Set z index,

Set pointer events

Text

On render complete,

On click,

On mouse enter,

On mouse leave,

On change visibility

Set visibility,

Set content,

Set font color,

Set font size,

Set font weight,

Set background color, Set border color,

Set border width,

Set border radius,

Set border style,

Set shadow,

Set opacity,

Set position,

Set z index,

Set pointer events

Third party analytics

-

Track

Variable

-

Replace value,

Sum value,

Concat value

Video

On render complete,

On load,

On click,

On play,

On pause,

On restart,

On reach 25%,

On reach 50%,

On reach 75%,

On end,

On change volume,

On set source,

On mouse enter,

On mouse leave,

On change visibility

Set visibility,

Play,

Pause,

Stop,

Restart,

Set progress,

Play until,

Mute,

Unmute,

Set volume,

Set source,

Set playback rate,

Set loop,

Set border color,

Set border width,

Set border radius,

Set border style,

Set shadow,

Set opacity,

Set width,

Set height,

Set position,

Set z index,

Set pointer events

Did this article help you solve your issue?

Aryel - Help Center

© 2026 Aryel - Help Center. All rights reserved.