Complex button

Wouter van der Post 4 years ago updated by Aleksandr Romanov (CTO) 4 years ago 1


I'm examining a way to build a 'control' that can easily be copy-pasted multiple times.

We've created a small video that shows the functionality of this control:

Screencast timer control.mp4

In this scenario the user can set a timer, and stop the timer when it's running. So initially I was thinking about a button with 3 states, in the Off state it looks like this:

Image 39285

The user can press the button and ends up in the second state. But in this state the user can adjust the time using the up/down arrows:

Image 39286

When the user presses 'start' the button ends up in the third state where the user can optionally stop the timer:

Image 39287

The actual timer functionality will be coded in JS, but I'm looking for the least complex way to create a UI like this without JS.

Do you have a suggestion how to accomplish this?



You have a very "clear" interface. I like your idea!

I think, the best solution is JS code for this case. You can try using different popups, but over wise you will use JS for the timer...