Glitch with dcc.Rangeslider? What was changed from Dash 0.43 to Dash 1.1.1 regarding the RangeSlider component?

Dash Python
1

Hello there,

I had the below basic rangeslider:

    html.Div([
        dcc.RangeSlider(
            id='GlobalRangeSlider',
            min=0,
            max=len(available_dates_rangeslider)-1,
            marks={i : {'label' : available_dates_rangeslider[i], 'style':{'transform':'rotate(-90deg)'}} for i in range(0, len(available_dates_barchart)) if i %2==0},
            dots=True,
            value=[30, len(available_dates_barchart)-1],
            allowCross=False,
        )
        
    ], className="row", style={"height":"45px", "margin-left":"5px", "margin-right":"5px", "padding-bottom":"1em"}),

On my localhost, with Dash 0.43, I had:

dccRangeSlider
dccRangeSlider.png693×183 7.56 KB

On my VPS, with:
dash==1.1.1
dash-core-components==1.1.1
dash-daq==0.1.5
dash-html-components==1.0.0
dash-renderer==1.0.0
dash-table==4.1.0
I had

dccRangeSlider2
dccRangeSlider2.png693×215 7.91 KB

I’ve updated my localhost from 0.43 to 1.1.1 and now i also have this messy result on my localhost:
dccRangeSlider3

Is it a glitch ?

2

I found a work around: I’ve added “margin-left”:"-16px"

marks={i : {'label' : available_dates_rangeslider[i], 'style':{'transform':'rotate(-90deg)', 'margin-left':'-16px'}} for i in range(0, len(available_dates_barchart)) if i %2==0}

But i don’t understand why I have to add or remove CSS property depending on the Dash version I’m using. Doesnt make sense to me :face_with_monocle:

Also, I believe it could be cool if we could have a better understanding/description about how components like a dcc.RangeSlider are built. My current approach consists in successive tries, until I get the result I want. Typical question I have: if I transform my mark with a rotation of 90 degrees to the left, how is the space between the marks computed ? does it change ? If i add a left margin, does it add the left margin on the rotated label, that is, on the left of the marks, or does it add the margin on the left of the text, that is, on the bottom of the rotated text field ? etc…