Hype Stepper Symbol

This Stepper just user Hype Elements and Normal Javascript.

The Stepper’s Form is inside the Elements innerHTML.

We have two functions.

The first function ( stepper() )is used to get the Symbol and it’s child Stepper. Then count up or down the number.
There is a repeater function that allows for you to hold the spinner buttons down and repeatedly step.

The forms inneHTML code also validates for numbers only.

This code should not need editing. And is called from the mouse down Action.

The second function ( spinEnd() ) is used to invalidate the setTimeInterval from the first Function.

This stops the repeater.

This function is called from the mouse up Action.

You can add code to this function after the single line of code there.

Code you would add here would be to get the value of the Stepper and then do something.

You would need to give the Symbol and ID. If you duplicate the Symbol then give each their own ID.

To then get the value of the respective spinner you would use something like.


step1 being the ID we gave to the Symbol.

The Symbol elements UI can be changed using the normal Hype techniques. They can also be duplicated and the Elements UI of the individual Symbols changed.

v2 update
Stepper_MHv2.hypesymbol.zip (16.8 KB)


Cool widget! I find when I click quickly it doesn’t seem to always register.

Wow! Were you listening to my questions today?! lol I like what I see. It is a little sluggish. But it works on an android! Thank you very much!

It seems to work ok here but I may need to perfect the interval. At the moment it is at 100 milliseconds. Any ideas on that. I kept it at 100 so as to not jump too many digits on each click

I was… :grin:


@jonathan, I just tried 70, That seems to work better. without stepping multiple times on a single click… does it for you.

I just used 60 and that is perfect!

1 Like

Ah, Just did 60. A bit too fast, I get multiple steps on a single click. I think 70 works better, here any way how does 70 work for you.

I also forgot to add onsubmit="return false" to the from tag. This prevents the enter key reseting the form if you click into the input and hit enter.

Will need to update the above Symbol.

Thanks Mark! I’ll play with it tonight too.

This is the latest Version.

There are now a couple of extra functions.

There is a new ini() function that is called on Symol load.

This simply sets up a function that will be called if the user hits the enter key inside the input.

The function that is called is named yourFunctions().

This is now where you place your code for the stepper. This same function is also called when the stepEnd() function is called.

This makes it easier to edit your own code and takes into account entries made manually in the input.

The yourFunctions() has block of code already inside which should not be removed.

 if (  Object.prototype.toString.call(this) === "[object Window]" ){
		"[object Window]"
		"[object object]"

Because the yourFunctions() function would not normally be called in any of the hype actions, mouse click, load actions etc. It will not export with the symbol. To counter this I have added it to the Symbol on load action.
The line above insures that nothing actually is run when the symbol on load runs. But everything works correctly when the buttons or enter key are used.

(@jonathan, it would be great if there was an option on Symbol export to choose what Functions should be included )

Again the symbol can be duplicated


Stepper_MHv4.hypesymbol.zip (32.0 KB)

Too late, I grabbed the latest version. I think it’s great but still is very slow on android. I remedied this by slowing it down far enough to be held down and tick by with enough time to let the user pick. I’ll stay tuned though. I think you’re on to something!


Lol. I found a bug I want to fix… before I re instate post 11 with the new version.

It’s very cool, but a question though. How are you using it? It’s function?

Ok, re instated the last update above in post 11 and hopefully the bugs are fixed. So grab that one. v4

See the last version (v4)

Normally you want to capture the inputs value and use that somewhere or trigger something when at a particular number.

You can add your code for this at the bottom of the yourFunctions() function. There is an example there.

I can tell that I am going to need to learn a lot more about functions, javascript, the extensions of Hype.


Works pretty much the same but changed some of the code. to make it cleaner.

The yourFunction() is now just for your code use. I used a trick I forgot about to export the function.

The input is now set to background colour transparent This means we can now use the Rectangle’s colour to style it.

Stepper_MHv5.1.hypesymbol.zip (29.5 KB)

I haven’t looked at the code, but macOS steppers will always trigger on mouse down, then have a delay before the repeat comes into play. So I’d start a timer for 1000ms (1s) to begin a repeat and then from then on use the 100ms to increment. The initial down should always instantly trigger a step.

1 Like

Here is one using a timeout to do it how you suggest. Work well for me.

I also now have the templates users functions ( yourFunctions() ) trigger as the user types in the input field as well as on each step. This seems more in keeping with a real stepper.

I like that I can use Hype to create a stepper for the simple reason this type of Template makes it very easy for us to customise the styling without having to put in any css.

Stepper_MHv6_test.hypesymbol.zip (31.0 KB)