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:
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:
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:
When the user presses 'start' the button ends up in the third state where the user can optionally stop the timer:
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?
Customer support service by UserEcho