datetimes that are close together on silder used for ranges are illegible.

[cjw296]

Steps to reproduce

Here's an example:

from datetime import date
import streamlit as st

dates = st.slider('date range',
                  min_value=date(2019, 8, 1), max_value=date(2021, 6, 4),
                  value=(date(2021, 5, 21), date(2021, 6, 4)))

Expected behavior:

Legible dates and handles on the slider.

Actual behavior:

Is this a regression?

no

Debug info

• Streamlit version: Streamlit, version 0.81.1
• Python version: Python 3.9.4
• Using Conda? yes
• OS version: Windows 10
• Browser version: Latest Chrome

Additional information

It probably makes sense to right-align the lower end of the range and left-align the upper end of the range.

[kmcgrady]

Thanks for the feedback here @cjw296 ! I will put this in our backlog!

[lawilby]

Had conversation with PM about this issue and we should try stacking the dates when they are overlapping as a solution. Recording conversation here in case someone else picks up this issue.

[WestedCrean]

Hey, happy to work on this as I already did it for a project - should they be stacked both above the slider or one above, one below as on screen?

[vdonato]

Hm, CCing @jrieke to get an opinion on this. I think I'd prefer one above/one below as shown in the screenshot, but a member of the product team should probably make the call.

[jrieke]

Oops, sorry for the delay! Just saw this now. I think my preference would actually be to do it like this:

I.e. just have the left date offset a bit to the left, so it doesn't overlap the right date. With stacking vertically, I think we'll run into trouble quickly. If we stack both dates above the slider, they are so high they they'll overlap the widget label on the left side. If we stack one above/one below, then it looks very cramped and it's also a bit confusing which date is which.

[NanisTe]

Why do we need moving values we could have visually fixed min max values below the slider and fixed min max selection values above the slider. No moving or realigning needed.