May 9, 2018
Set Variables With Interactive Sliders – Part 5 Additional Resources
Comments
(4)
May 9, 2018
Set Variables With Interactive Sliders – Part 5 Additional Resources
I am currently a provider of technical training and support in the electronic manufacturing industry. My prior training and work experience as a teacher, network administrator, web design, and instructional design make me well prepared to design it, develop it, and deliver it. I am a father of five, a US Army veteran, and I enjoy playing the guitar as well as performing in local community theater. 
Legend 99 posts
Followers: 153 people
(4)

This is the fifth and final part of the series for adding a slider to your project that will update your variables.

If you have not seen the first four, you may want to get caught up.

Part 1 – Introduction

Part 2 – HTML and CSS

Part 3 – Adding File to the Stage

Part 4 – The JavaScript

In this post I just wanted to share the complete project so that you will have something else to play with. The complete project, of course, extends the usage of this idea to two sliders on one screen which control different variables. I also thought I would share some websites that I spent a significant amount of time on in order to get this figured out as well as some other resources I mentioned over the last four postings.

Project Items – zip file contents – approx 650K
projectFiles

The Money HTML File – This is the code for the slider that sets the dollar amount
The Percent HTML File – You will notice that it is exactly the same as the money file but with a different range, step value, and named ID
The JavaScript Text – You should notice that the two sliders have essentially the same code. What changes is the variable name  frame vs frame2  for example, and the addition of the formula for calculating the new price with sales tax added on. Remember – this is placed as an OnEnter action.
The CPTX File – This was made with Captivate 2017 so, I guess, don’t try to open it with an older version. You can, however, use the other files to recreate it in your own version, if different.

Websites and Other Items

I am no expert in this JavaScript stuff. I had to study hard and perform lots of trial and error to get things to eventually work.
Here are some websites that I used pretty extensively to learn stuff during this project. Maybe you can gain from them as well.

W3Schools – Amazing resource! Covers HTML, CSS, JavaScript, jQuery, and more! Like a “One-Stop” shop! I spent most of my time here by far. The little windows to test things is helpful.

jQuery UI – This project did not require anything from the jQuery-UI specifically but did use some jQuery but I learned a great deal from this site.

7-Zip  –  This is the program I use for creating and extracting zip files. The price is right – FREE!

Notepad++  –  This is my editor of choice. I started using it during my undergrad courses in HTML, CSS, PHP, and JavaScript and haven’t switched yet. And again, it is FREE!

Ninite – I did not mention this site in my posts but it is the place I go to get my free downloads. It will automatically pick the right versions and install them with out all the need to go to a million different sites and click NEXT, NEXT, NEXT just as many times. It also strips out any freeware that piggybacks on a lot of free stuff out there.

Also a big thanks to one of my colleagues who spent two hours performing trial and error runs with me.

I had a great time making this and sharing it with all of you.
I hope you will get something out of it and be willing to share your ideas related to their use for us to see.

4 Comments
2019-06-26 11:13:26
2019-06-26 11:13:26

Hi Greg,

Great blog, thanks for this!

But you know how it is – you give people something, and they will want more at once 

In your solution, the variables are updated on release of the slider at the new position (on mouse-up, I guess). Is there a way to have them update dynamically while you drag the slider?

Like
(1)
(2)
>
Gaanf
's comment
2019-06-26 11:45:01
2019-06-26 11:45:01
>
Gaanf
's comment

Funny you should ask – I just posted yesterday on that in the comments for Part 4.

Basically – in the code – use input instead of change.

Like
(1)
>
Greg Stager
's comment
2019-06-27 13:49:11
2019-06-27 13:49:11
>
Greg Stager
's comment

Sorry, must have missed that comment on the other thread. Thanks.

Like
2019-03-24 11:44:32
2019-03-24 11:44:32

Thanks for this series, Greg. Very helpful.

Like
(1)
Add Comment