Date sliders have minimum span making reasonably narrow time slice impossible

[corneliusroemer]

I would sometimes like to zoom into the very most recent sample dates. Unfortunately, the date range slider does not allow me to get in closer than maybe 5-10% of the whole time span. For SC2 trees this is now around 6 weeks, which is quite a lot of time. I'd like to be able to zoom into the most recent 2 weeks. To do this, I currently have to edit the URL to change the date manually. But that's not great since it makes a browser reload necessary.

I can't slide the left hand slider any further to the right than this:

I don't know what the best way would be to give the user more control. I presume you chose the minimum slider width on purpose because otherwise it becomes difficult to slide open again. One could add a text field?

[trvrb]

The minimum slider width existed to make it a nice user experience when pushing data slider for something like: https://nextstrain.org/ebola. This minimum width makes for a nice range and an informative map view. It's also necessary to keep the handles from getting too close to one another where they'd become difficult touch / click targets.

That said, I also edit the dates manually via URL to address the issue above. I'd think the nicest UI here would be to click on the "2021-07-15" and get to enter text. I'd prefer text field to calendar field, which I find cumbersome for these large spans of time.

[corneliusroemer]

Would one alternative be to make the minimum span user customisable depending on purpose? Or are we them getting into unwieldy territory?

[huddlej]

I'd think the nicest UI here would be to click on the "2021-07-15" and get to enter text. I'd prefer text field to calendar field, which I find cumbersome for these large spans of time.

+1 for min/max date entry fields. This is a feature request we've had from other users before for the same requested use case.

I don't understand the cumbersome part of the formal date input type though. I thought the calendar widget was an optional tool that users can select but that we can also enter text like a normal text field? Thinking of this example from the Mozilla docs. (Edit: Using a date field also has the benefit of providing semantic information for accessibility tools.)

[jameshadfield]

This would be great.

Needing to select this isn't frequent, but essential when it's needed (I use the URL hack too, but it's not the world's best UI). I would think selecting text would be the easiest and most useful addition. As an addition to this, having small icons which bring up a calendar widget would be nice and may be more useful for some.

For instance, a MdDateRange icon would look like:

and clicking brings up a small datepicker, like so (just using a screenshot as an example):

Requirements / minor comments:

• For text entered dates, let's enforce YYYY-MM-DD
• Text entered dates will need to be validated (i.e. 2021-13-32). If invalid it's probably simplest to not change the state and dispatch a warning notification event.
• "Valid" dates will still have to be validated against the dataset and currently selected range. If the date picked is outside the valid range, then we could default to the minDate/maxDate as appropriate. If the selected lower bound is in front of the selected upper bound, then we could switch them round.
• Should respect the styled-components theme we pass to sidebar components so that it looks nice on both vanilla auspice and the nextstrain.org customisation.
• Use a library for the calendar widget instead of rolling our own. These can introduce a large amount of code, so something simple would be preferred. flatpickr looks ok, but I haven't investigated all the options here. If we could use the native datepicker (see John's example above) then that may be simplest? It'd be nice not to add huge amounts to the code bundles here.
• I don't see any issues with how this would work with animation, but this should be tested.