Can't make tooltip of dcc.RangeSlider() show marks for date slider?

[alexwolf22]

Hello,

I am using the dcc.RangeSlider() to make a slider to select which dates to display in the chart.

Since the RangeSlider() only accepts numbers as inputs, and needed to convert the dates to UNIX timestamps.

I want the slider to be set up with no marks, but with the tooltip to hover display the text date, not the UNIX ts.

Using the marks attribute I can make the date show correctly in the UI, but I want to have no marks and only the tooltip.

With the marks, it looks like this

But when I just turn the tooltips on it doesn't display the text version of the date text in the tooltip.

When the marks and tooltips are turned on it still only displays the UNIX ts in the tooltip.

Is it possible to use a text alias for what to display in the tooltip? The only attributes I can see that could be set up in the documentation are always_visible and placement. I want it to show dates, not the UNIX timestamp. Also is it possible to style the tooltip differently? The grey color doesn't align with the rest of the colors on the page.

If not it would be great if this can be on the product roadmap. I really want this feature so open to creating my own PR too if you can point me in the right direction : )

Below are my current lib versions

dash==1.13.4
dash-bootstrap-components==0.9.2
dash-core-components==1.10.1
dash-html-components==1.0.3
dash-renderer==1.5.1
dash-table==4.8.1

Let me know thanks a ton for the help.

Cheers,
Alex

[alexcjohnson]

Interesting idea! My gut reaction is that we should treat Slider and RangeSlider like plotly.js axes, and give them a type prop. In principle all the types in plotly.js may be interesting (linear is what we have now, the others are date, log, and category) but here you're interested just in type: 'date' and we could certainly start with just linear and date, adding the others later as interest dictates.

Then the values would be date or datetime strings rather than numbers, though within the slider itself they'd be encoded as numbers - presumably epoch milliseconds for the date as UTC, unless and until we implement time zones. We'd set the formatting based on the full span of the slider and/or the step - and the step would be a number of milliseconds, until you get to a nonuniform period such as months - in plotly.js we then use strings like 'M1' for 1 month, 'M12' for one year, etc.

If you're interested in contributing, the first thing to do would be in these issue comments finish fleshing out the props we'd add and how they should behave. Then implement it to those specs and create a PR, and in the PR we can discuss what tests and other pieces are needed to complete the feature.

related: #578

[alexwolf22]

Hello,

Cool, I would love to have this feature made! Having a free Range Date slider would be great because I think the UI/UX for it is a lot better than the DatePickerRange.

I am just going to use the DatePickerRange for now because I have too many dates in my datasets to cleanly make marks for the range slider with epoch milliseconds.

I would open the PR myself, but I am VERY rusty on JS and React, hence why I am using Plotly Dash. Thanks a ton for open sourcing it!

I plan on getting better at JS/React in the future but unsure when I will be able to. I never navigated this codebase before, so would take me a while to make the change.

If you can keep me updated if this makes it into the product roadmap that would be great, and I will do the same with I create a PR.

Thanks for the help.

Cheers,
AW

[dm1681]

Not sure how active this, but I too would appreciate that feature to be implemented. I'm using dcc.RangeSlider as a way of filtering a data set between start and end dates, and I like the aesthetic of the RangeSlider more the DatePickerRange. Is this feature on the table to be implemented at all?

[kenneth-liao]

This is absolutely needed! Like the other comments mentioned, it's essential for the user experience when working with dates.

[NicoPL]

Same here, I would love to have a rangeslider where I can play with dates. Example: starts from 2020-05-28 and ends at 2022-07-05, steps on months (20xx-xx-01), marks on years (20xx-01-01).

[rafa-aptitude]

I would also love this feature to be implemented.

[slvnwhrl]

I think this would be a very helpful feature, as well. In the meanwhile, I find that displaying the currently selected range in a separate HTML element (without a tooltip) is a more or less elegant workaround.

[JakeVestal]

I agree we need this feature. @slvnwhrl 's solution is a good stopgap but really, tooltip --similar to marks -- should be able to accept a list or dict that contains html bits that you want the tooltip to display when a given value is selected

[ugurzcifci]

+1 for this feature. I'm using a similar approach to @slvnwhrl in a dash app but currently user cannot see the selected time until the drag ends (update mode = mouseup). Another workaround would be to put another button to confirm the selected range, but I wouldn't prefer it for user experience.

[EnomisRekschil]

possible workaround: https://github.com/plotly/dash/issues/1846#issuecomment-1543900446