Thanks for the feedback, Ron.

The dial function required the use of JavaScript.

Without going into lengthy detail – the basic premise is as follows…

All the grid lines are the same distance apart.
The current value of rotation of the dial is passed to a variable which is then checked so that the plotted point will move plus or minus X or Y number of pixels based on the number of degrees of rotation. Since I wanted to avoid any positioning between lines on the grid, I chose to snap the dial to specific degree increments so that the point would line up nicely. I also locked the dials to a particular range to prevent driving the point outside the boundaries of the graph.

If you’re interested in more on sliders, I have a couple slider examples where I explain the code as well. Feel free to check them out. I’ve provided the links to the final post in each series which, in turn, have links to the previous ones.

https://elearning.adobe.com/2019/07/fun-color-sliders-part-2-code/

https://elearning.adobe.com/2018/05/set-variables-interactive-sliders-part-5-additional-resources/

Hi Greg,

Thank you so much for your response. I am in the process of incorporating a slider into captivate.

I have looked at your slider styling and incorporated it with some changes but I am following your structure. The one thing I cannot seem to overcome is that in Edge the position of the slider is about 10px lower than Firefox or Chrome. I have added margin-top specifically to Edge but to no effect. Firefox also does not respond to a margin change. I was wondering how you overcame this? You sliders in the “Fun with Color all seem to be in the same position on any browser.

Regards,

Ron

Ron,

Honestly,  I did not do any browser comparisons when I initially made these but I took a look just now. With the Tax Calculator I have a different slider handle in all three browsers (Chrome, Firefox, and Edge) As you said, with the color sliders they are the same.

I think it is because on the color sliders, I did not create a custom handle and so the default is being used in all cases. It seems, on my computer, the custom handle is either ignored (Firefox), modified slightly (Edge), or rendered correctly (Chrome).

That was over two years ago now – wow – how time flies!

If I were to remake that project – I would utilize the Greensock library and I think I would have much better results on that issue.