Complex button

Hello,

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:

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?