RangeSlider: How to display one label each two marks?

Dash Python
1

Hello,

I have a Range Slider with 65 labels starting from Jan-14, and whose length will grow going forward, each month.

On Desktop, there is enough room to display every mark until 2050 I guess.

But on smartphone, it’s messy. If I make the font smaller, it’s unreadable.

So, I would like to display each mark, but only one label each 2 marks.

My code is:

    dcc.RangeSlider(
        id='GlobalRangeSlider',
        min=0,
        max=len(available_dates_rangeslider)-1,
        marks={i : {'label' : available_dates_rangeslider[i], 'style':{'transform':'rotate(-90deg)', 'font-size':'8px'}} for i in range(0, len(available_dates_barchart))},
        value=[30, len(available_dates_barchart)-1],
        allowCross=False,
    )

The Doc available here https://dash.plot.ly/dash-core-components/rangeslider, says “If you want to set the style of a specific mark point, the value should be an object which contains style and label properties.”

Question is: how can I include a condition in this loop, such that:
if the key value modulo 2==0, then the mark’s label is an empty string?

2

have you tried
marks={i : {‘label’ : available_dates_rangeslider[i], ‘style’:{‘transform’:‘rotate(-90deg)’, ‘font-size’:‘8px’}} for i in range(0, len(available_dates_barchart)) if i %2 ==0}

???

1 Like
3

I hadnt, but the solution you suggest, @lahashh, hides the marks without any label.

So, it’s not exactly what Im trying to get as a final result, but it’s better than before. Thank you :slight_smile:

4

Your Welcome. Glad it helped!

5

I fixed the last part of the problem using property “dots:True”.
It does display each mark now, even those without label.

1 Like