Addition of values from sliders

Using JavaScript with Hype
1

Hi,

I have managed to follow instructions from this post to create 2 sliders, each displaying integer values of 0-10.

I want to add these values but I am not a javascripter and hoped someone may be able to help. I’m also wondering if I have created the javascript appropriately for the sliders - essentially I’ve duplicated the javascript for each slider but wondered if it can all be incorporated into 1 script.

Any help is much appreciated.

Regards, Murray

PS: having trouble attaching file - link to adding_sliders.hype.zip in Box.

2

Maybe this helps…

I’m using an iPad right now, and I’m about to go sleep, but that Template might be related. It has two sliders, used together as part of a calculation.

2 Likes
3

Yeah, you could combine this into one script. @Photics example is good but uses a different construction for the sliders. The approach I would take is just to have the function get all the values from both sliders and then set them all at the same time. Slightly inefficient, but I don’t think it would matter. I assume you’re going to want a new element with the ID “sum” that will display the total. The code would look like this:

	// gather amounts
	var amount1 = hypeDocument.currentTimeInTimelineNamed('slider 1');
	var amount2 = hypeDocument.currentTimeInTimelineNamed('slider 2');
	
	// calculate sum
	var sum = (amount1 + amount2);
	
	// get elements
	var amount1Element = hypeDocument.getElementById('amount1');
	var amount2Element = hypeDocument.getElementById('amount2');
	var sumElement = hypeDocument.getElementById('sum');
	
	// set elements to new values
	amount1Element.innerHTML = amount1.toFixed(0);
	amount2Element.innerHTML = amount2.toFixed(0);
	sumElement.innerHTML = sum.toFixed(0);

You can see it in action here:

adding_sliders_sum.hype.zip (22.3 KB)

One other thing - the sliders aren’t really moving 1:1 with the mouse. A On Drag to Control Timeline at 100% speed means that for every 100px dragged, the timeline will advance by 1s. Your elements are moving from 37px to 504px = 467px total in 10s. Therefore the speed value should be 10/467 = 214% for a 1:1 match. I also made this change.

3 Likes
4

Thanks so much to both of you. I only make the odd iBook widget and haven’t ever learned any coding so I’m grateful to both of you for your great explanations and examples (and thanks also to John for sorting the drag speed which I didn’t realise could be calculated). I purchased Michael’s book last year and found it a great help but hadn’t applied myself to it for this problem but I’m pretty sure I can develop my idea from here.

These forums are probably the most helpful and friendly I’ve been involved with. Thanks again.

2 Likes
5

I’m also wondering if the slider can be set up as incremental steps, so at each change of value (in this case at each second in the timeline) it “snaps” into place. I’m trying to find an example but haven’t so far. This isn’t critical but in this case it might be an improvement if I can manage it.

Thanks, Murray

6

https://www.w3schools.com/jsref/dom_obj_range.asp

If you’re using the example from my site, just change the step value. If you’re using Hype animation, use the instant transition and lots and lots of key frames… ha ha!

1 Like
7

Thanks Michael for the link. I also found another link here but the scripting is beyond me!

I also realised my logic was flawed in the first example as I was rounding the result rather than the amounts to be added which meant that it was possible to display a sum that was not equal to the sum of the displayed amounts. I have updated jonathan’s file here:

adding_sliders_sum_decimal.hype.zip (22.6 KB)

I will post an update if I get the stepped sliders working. Thanks again, Murray.

8

Instant timing functions with keyframes at each second marker for the left property will work from a visual standpoint. The result will be that as you drag it will only show the slider at those points.

If you want the slider to still be smooth but snap to the specific positions, then what you’ll instead want to do is to add Timeline Actions that are set to Pause Timeline… at each second marker. Then set the On Drag handler to use the Continue after drag setting. This will make each pause timeline maker a stop point.

1 Like