I am designing an app that requires the user to pick
- a time (e.g. 3 PM)
- an additional value, representing a time gap (in minutes) before and after the selected time.
For example if the user has selected 15 PM and 15 the app will consider times 2:45 PM to 3:15 PM.
The trivial solution of a time selector combined with a list box, produces a long list with too many possible options for the time gap.
Another attempt was implementing it as a slider over 24 vertical lines where the width of the slider is proportional to the time gap. This approach was too difficult to operate on a small screen.
What is the best way to implement such a component?