I want people to be able to tell how much they have worked during their shift and this seems like a perfect solution. There is just one problem. They can also work till the next day (ie: from the 5th 20:00 to 6th 04:00). The labels within the slider (9:00 and 18:00) are not a must and I don't think 00:00 till 48:00 would look visually appealing.

What would be the best way to do this keeping the obviousness for the user? Should I even use a slider for this?

enter image description here

  • As inputs (number, text, date...) each one has a reason and different usage purpose. Maybe in your case, the slider is not the best solution. Why not just an input or an extra pre-selection question asking about the period (night shift, day shift...)? Personally I hate slider in mobile, is difficult to select the exact number that I want. Commented Sep 5, 2019 at 7:47
  • For that reason the numbers before and after the slider will be input so that they can choose to be more precise if they want. The slider itself I want to make steps by 5. I thought it would be a nice way to limit the amount of fields but actually now that you say it. Two date picker fields would consume just as much (if not less) space and be more precise. Commented Sep 5, 2019 at 8:40
  • I believe that should be intuitive for a simple form like this the user shouldn't think. I also believe that the user tends to use a slider instead input if is there (I have no data to prove it). And if the numbers before and after are inputs they should look like input fields. I high recommend to track what the user uses more and in the future use just one alternative. Commented Sep 5, 2019 at 10:22
  • 1
    Does user fills data daily as soon as shift ends or he can back-fill data for previous days as well? Asking this to make sure whenever user will fill data, "Today" and "Tomorrow" for him at that moment is in sync with the "day" for which he is adding shift data.. Commented Sep 6, 2019 at 9:37
  • It's the latter. Basically this is about the admin who checks if the hours are filled in correctly and corrects if necessary. For this he first selects a date, then all users are shown for the selected date. So the date is based on the selected date and the day after. Thank you for bringing that up I didn't think about it before. However with the shift solution of @BraDev this won't be a problem. Commented Sep 6, 2019 at 9:49

3 Answers 3


Like our discussion on comments my full answer for it is:

  • Add field to select the shift. This is needed if the employee starts the shift in a day and finished in another and is optional based on your decision on my second suggestion. Could be a select or a tag selector like this:

enter image description here

  • Change slider for inputs or make numbers before and after input fields. Don't forget to make the input fields looks like input fields.


  • On mobile with fingers select hours on small slider could be very difficult and with the mouse is very difficult to be precise.
  • Don't make the user think, forms must be intuitive and simple.
  • Any decision that you take should be measured.

You could use a combination of date / time picker as the example below (from this blog post).


This way your users can choose the time slot in whatever way is more convenient. You could default the day to today (or the previous day, depending on when do you expect users to log their work hours) so users whose shift doesn't span multiple days can just select the time. The calendar would only pop in case the user try to change the day, to save screen space.

  • I like this alternative but maybe could be too complex to select a date every time when you will add a shift time. Isn't it? Commented Sep 5, 2019 at 16:21
  • Like I said, leave the default day to (whatever day you expect your users to enter) and they'd only change it if the shift extends to the next day. But there might be better solutions out there.
    – Luciano
    Commented Sep 6, 2019 at 8:32
  • Yes, is a completely valid alternative. Maybe if the user can change just hours without open the calendar (keep calendar just to change date) could be interesting. But (question myself) showing the date should be a piece of extra unnecessary information on the form, isn't it? PS: My answer also should not be the best alternative, everything must be discussed and tested. Commented Sep 6, 2019 at 8:42
  • 1
    @BraDev yeah the calendar would show up only if the user try to change the day. I suppose the usefulness of both solutions would depend on the use case and testing.
    – Luciano
    Commented Sep 6, 2019 at 8:43

If you want to keep the slider I advise you do something like the picture down below. You may need to make your own slider or add a toggle button to change it to separate days. The blue being the working hours and the black being time off with added dates underneath the text in a grey.

enter image description here

If I were you I would drop the sliders and opt for a separate screen to do the editing with a start time and a shift length then work out the time end from that:

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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