One of the things I have enjoyed greatly about being a part of a community such as this is the opportunity to be challenged and inspired.

I also enjoy sharing the fruits of my own growth with the rest of you in the hopes that you will also find inspiration.

I have seen a great number of postings that do one or more of the following…

1. Ask about something related to drag and drop
2. Ask about draggable elements within fixed areas.
3. Ask about sliders and dials like what Articulate has.
4. Refer to the use of HTML5 Animations to get certain jobs done.

I found some hope in these things. So I set out on the research trail for the last couple weeks and have made what I think is a pretty neat achievement.

It started with making a slider with just a small chunk of CSS and HTML followed by getting it on the Captivate stage as an HTML5 Animation. OK, that was pretty cool but I found it to be rather lackluster since there really wasn’t anything useful to do with it at that point. ooooohhhh….. drag the handle back and forth…. The interaction needed some sort of purpose.

That meant finding a way to use the slider as a means of populating Captivate user variables so we can do some actions. Back to the research trail. After many hours of  trial and error and sifting through code, studying, and more trial and error, I finally have a working solution.

I will be sharing my first slider interaction with you in this post.

Over the next few posts, I will outline the work that it took to come up with this and I will warn you that it is not for the faint of heart, but I think if you start with what I give you over the next few postings and perhaps take a brave new step out of your comfort zone that you can come up with some amazing things.

This project is basically just a sales tax calculator. You utilize one slider to select the amount of money being spent from $1 to $100 and the other slider to select the sales tax rate from 1% to 10%. As you adjust the sliders, your total amount including the tax is calculated and populated in the box automatically. Now we have purpose and potential for sliders in Captivate. There are three variables…  varMoney,  varPercent,   and  varTotal. The sliders set two and a little math in the code populates the total. More on all that to come.

Here is the link and please stay tuned for the next part where I will continue by covering the HTML and CSS needed to create the slider itself.

https://s3.us-east-2.amazonaws.com/captivateshare/sliders1/index.html

I am really excited and pumped about this. I hope to hear about all the neat ideas each of you has for using sliders in your own projects. I think we are only scratching the surface with this. Captivate is an extremely powerful tool, I think, limited only by our creativity.