I have requirement to be able to show results of a given date and a given time span of 24 hours from that date.

If you were to pick 1/1/2016 10:00pm with a time span of 6 hours it would display all results on 1/1/2016 from 4:00pm - 10:00.

Users don't know if the time span goes forward or backwards from the selected date. What is a better way to display this UI?

Filter Results


The way people think about time is from left to right, left is the past and right is the future. Likewise positive numbers reflect future and negative numbers reflect the past.(time space and metaphor).

I have two solutions to recommend, the first is more diffucult to build but will eliminate almost any possible errors. The second is very easy to build but is not as efficient as the first solution.

First solution:

  • Use a slider for the time span. The slider will start from 0 Hrs on the right edge and finish at -24Hrs at the left edge. When the slider moves from right to left the span will decrease.
  • Expicitly show the From date/time. The field will be display only.

The solution will look something like this :


Second solution :

  • Use ONLY negative numbers for the time span field. It will change from 0 to -24 Hrs

There are a number of ways to do this, but the first two that come two mind are as follows (in order of difficulty):

  1. Simply put a + in front of the time span (e.g. +6hrs). A plus usually indicates a forward direction - this should be trivial to implement.

  2. Display a graphical time line, with the date marked intially, and the time span marked when the user selects it. For example:

    1/1/2016 10:00am 4:00pm

As an alternative, I would suggest displaying the time span (10:00am -> 4:00pm) next to the selection box as the user selects the offset. This way, there can be no confusion.


You can also consider using a DatePicker control for selecting the date, followed by two TimePicker controls for specifying the start and end times of the interval.

That is in use in Desktop email/calendar apps like Outlook, Thunderbird, etc.


We ended up going with the following approach:

Select the date, and than use a range slider to choose which time frame within that date.

enter image description here

  • For others who think to use this solution - there is a problem about this solution - you can't start and end your time frame in different days, i.e. if you want a time frame to start on Sunday 11:00 PM and end in Monday 05:00 AM, you can't do this in the proposed solution. This should be taken into account.
    – Hagai
    Apr 9 '17 at 11:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.