Enable after before before in budget time of day slider

[tijlleenders]

Is your feature request related to a problem? Please describe. It's very annoying when I can't schedule a budget to sleep between 10 in the evening and 6 in the morning.

Describe the solution you'd like Let me :

• Show the slider 'in rainbow shape' like in the picture below
• Allow me to reverse the hours, by dragging on the current visible timeline shape (not past it)
• Also let me click on the hours, allowing me to manually input start / end
• When start > end: show a permanent warning "Ends on next day."

Describe alternatives you've considered Auto extend the timeline to the next day. This is more confusing - and requires more complicated code than the proposed solution.

or Let me :

• differentiate between start slider (with a >) and the end slider (with a <)
• AND allow me to drag the end slider before the start / past the end.
• When I do that : show a permanent warning "Ends on next day." Dragging past the start/end of the slider is tricky, technically and UX wise.

Additional context If we're going to build a custom slider component I have a design proposal:

Maybe even replace the 'Between' with 'till' to make it easier to read from left to right.

[vinaybadgujar102]

differentiate between start slider (with a >) and the end slider (with a <) AND allow me to drag the end slider before the start.

@tijlleenders, I checked the antd's docs but couldn't find way to do the above-mentioned modification on Slider Component. I think we have to build a custom slider component to meet our requirements.

@Tushar-4781 what are you thoughts on this?

[tijlleenders]

@vinaybadgujar102 @Tushar-4781 Let's discuss this further when it's on the top of the Parking lot prio.