CODEWITHSUNDEEP
pythonplotly-dash
Giorgia Mancini
Giorgia Mancini

Reputation: 131

RangeSlider prblem in Dash Python

I'm working on a Dash App and there is a RangeSlider element that allows to select a range of dates. Here is the code:

dcc.RangeSlider(
                    id='my-range-slider',
                    marks={timegm(datetime.strptime(years_list[i], '%Y-%m').utctimetuple()): {"label": years_list[i], "style": {"transform": "rotate(45deg)"}}
                           for i in range(len(years_list))},
                    min=min_value,
                    max=max_value,
                    value=[min_value,max_value],
                    step=1,
                )

where "years_list" is a list of date strings. The RangeSlider is connected to a graph, but the problem is that is years_list is too long, the marks appear like the image below, while if the list is not too long the values are good. enter image description here

Is there a way to limit the number of visible marks in the RangeSlider? Or a way to fix this graphical problem?

Upvotes: 0

Views: 693

Answers (1)

Brady
Brady

Reputation: 419

You can adjust the number of marks on the range slider by using the "step" argument of the range() function. You pick the maximum number of marks to keep the user interface looking clean.

import math
qty_of_years = len(years_list)
maximum_number_of_slider_marks = 20  # You pick max qty for good visuals in user interface
step_required_for_range = math.ceil(qty_of_years/maximum_number_of_slider_marks)

marks={timegm(datetime.strptime(years_list[i], '%Y-%m').utctimetuple()): {"label": years_list[i], "style": {"transform": "rotate(45deg)"}}
                           for i in range(0, qty_of_years, step_required_for_range)},

Upvotes: 1

Related Questions