Animate a slider

Hi everybody,

In my XD prototype, I have a slider that moves from step one to step four. And at every step the level and a new comment are displayed (see the video enclosed for a demo)
When I try to export the project, the area is not clickable and don’t move at all.
Is there any way to make it runs in the html export as in the Adobe XD project ?

Any help is welcome.Sample.zip (966.1 KB)

Interesting! I’ve worked with sliders before but have not made anything this fancy.

I would ask on a site like StackOverflow if you have to have it exactly match in the demo and then take that code and use Markup Inside to add it to your page.

https://velara-3.gitbook.io/web-export/element-options/markup-inside

Otherwise you could use Adobe Web Spectrum components or the Materialize CSS range component.

Here is an example of the Materialize CSS range:

image

One more comment on this. Adobe XD is a tool that provides a means to create, illustrate and animate your designs and prototypes.

Web Export takes those graphics and converts them into web page elements.

The input slider or input range is a user interface element that a person uses to interact with a form to gather data. So in Adobe XD the slider is so far only a graphic.

image

Web Export doesn’t provide any form elements or user interface components but it can create them by changing the tag name or using prebuilt user interface components.

https://velara-3.gitbook.io/web-export/element-options/tag-name

How exporting works

https://velara-3.gitbook.io/web-export/how-exporting-works

However, there are prebuilt components that you can use like Materalize CSS and the native HTML elements but they are not automatically skinned. Skinning is the term used to describe changing the visual appearance of an object but retain the underlying behavior.

So what this means is that right now, the slider is just a graphic. It has to be exported as an existing HTML element that has the behavior you want.

One of the goals of Web Export is to provide full skinning and component support and support existing libraries that do this. There are a few hurdles with that in that the Adobe XD API does not allow traversal of Adobe XD Components (Symbols). I can only parse the XD Component in it’s selected state in XD.

A new feature is in development that will make some of this more simple and allow you to easily create your own components and modify them visually across projects.

Thanks for the information