Time Range Selector

Press "z."

Working on a slightly different web ui than the last few — in this case, the network admin is viewing a history of a user's location over a specified amount of time. This can either be a range within a given day (upper portion of shot), or a from 00:00 o'clock on a starting date until 00:00 on the terminal date.

Exploring custom time-selection control, in lieu of text entry, to avoid illegal inputs (alphabetical input in numeric selector, etc).

In production, there's a calendar-type filter to the left of the times. Set the first date, and the time selection appears, starting at 12am. Set the second date, and the second time selection appears, ending at 12pm. On mouseover, clock icon becomes a "clear" button. Select the time label on the selection to type an exact value, and the slider repositions accordingly.

The yellow markers indicate a 6hr unit, with each of the smaller markers being a single hour. A selection must be an hour at minimum, and selections are made in .25hr increments. Mouseover on marked increments shows their value (12am, 1am, etc).

View all tags
Posted on Jan 3, 2017
Wil Nichols
Design at Zello

More by Wil Nichols

View profile