Horizontal slider but vertical marks or label of the marks

Dash Python
7

Hi,

I was able to replicate the vertical markers, however i am having issues with the alignment of the marks to the dots.

When the browser width is resized (shrinked) or when the webpage is zoomed beyond 100%, the marks get aligned but when browser is in full screen or zoomed below 100%, the marks are not aligned.

  1. Full Screen or zoomed <=100% (rightmost mark scales outside viewable area)

    image
    image1920×222 9.64 KB

  2. Resized browser or zoomed >100% (marks scales perfectly under the dots)

    image
    image709×198 9.75 KB

My Code;

app = dash.Dash(name)

app.css.config.serve_locally = True
app.scripts.config.serve_locally = True

app.layout = html.Div([
html.H2(‘Range Selector’),
html.Div([
dcc.RangeSlider(
id=‘my-range-slider’,
min=0,
max=len(df_volpanalysis.columns)-1,
step=1,
value=[0,1],
allowCross=False,
marks= {(i):{‘label’:str(df_volpanalysis.columns[i]),
‘style’:{‘color’:‘red’,‘writing-mode’: ‘vertical-rl’,‘text-orientation’: ‘use-glyph-orientation’}
}for i in range(len(df_volpanalysis.columns))}
)],className=“six columns”),

html.Div(id=‘output-container-range-slider’)

])
app.css.append_css({
‘external_url’:‘https://codepen.io/chriddyp/pen/bWLwgP.css’
})

@app.callback(
dash.dependencies.Output(‘output-container-range-slider’, ‘children’),
[dash.dependencies.Input(‘my-range-slider’, ‘value’)])
def update_output(value):
return ‘You have selected “{}”’.format(value)

if name == ‘main’:
app.run_server(debug=False)

Appreciate if anyone could help me.