dcc.RangeSlider: label above the marks instead of below?


Is there a way to display the labels of a Range slider above the marks/slider, instead of below?

Should it be with a mouse or a finger, when using such a slider, labels are partially hidden if they are below the slider iself.

I found a way to do it, playing with style attribute “margin-top”:"-30px".

Labels are now above the Slider.

However, I would like that odd marks stay below the Slider, and the even marks above.

I wrote this:
marks={i : {'label' : available_dates_rangeslider[i], 'style':{'transform':'rotate(-90deg)', 'font-size':'10px', 'margin-top':'10px'}} for i in range(0, len(available_dates_barchart)) if i %2==0},

in my dcc.RangeSlider to get the labels below the Slider.

The issue I have now is more about the syntax, how can I apply the second style, with the negative margin, to the odd marks?

1 Like

Fixed, solution posted here: Python - What's the correct Syntax to add a condition in my loop?

Maybe not the best way to do it, but it works.