How to make text count up/down with scrolling bar

Hi everyone,

I’ve been trying to figure out how to make a slider bar that includes a value above it. When the user slides the circle along the line, I’d like for that value to increase or decrease. How on earth do I get it to do that?

I’ve already succeeded at the animation. I just have no idea where to go next to make sure that the # changes.

Screenshots to illustrate what I am talking about attached.

1 Like

you can do it with Hyde only, no javascript

Use a box ( the group) to reveal the animated bar and edit the INNER HTML to change the number.
I’ve changed also the color :slight_smile:

drag.hype.zip (117.4 KB)

2 Likes

Awesome! Thank you so much!

I have another question. On release from dragging, I want it to jump to a new scene. Is there anyway to make that work?

Thanks!

@cmykversusrgb / Jonathan -

The best way I know to do this is with JavaScript. Assign a new JavaScript function to the slider object with the ‘On Drag’ Action - in this case, I named the function ‘dragSlider’:

In that JS function, include the code below:

if (event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseEnd) 
{
     hypeDocument.showSceneNamed(sceneName, optionalTransition, optionalDuration);
}

This basically means, when the drag event ends (that is, when the slider is released), go to a new scene.

Hope that helps… ~ John

duplicate of this post:

If you look at my answer in this post: Drag mouse release to trigger next scene - #9 by DBear ...you will see both questions above being answered. You will have to use Javascript because in the other post you mention that you want to transfer the amount to the next scene also. But, I show you a technique that reflects what I would do in this situation however it's not gonna be a plug and play solution if you have set up your document based on @michelangelo's solution above but you should be able follow the gist of it to get your amount to transfer over.

Be careful posting twice on the forums or if you are going to do it make everyone aware of what has been done before and share your document / workings so that we can tailor the solution a bit better to avoid confusion and back and forth.

1 Like