Horizontal slider but vertical marks or label of the marks

Dash Python
1

I am using a slider but sometimes there are too many marks and the name of marks just smush in to each other. I would like to make the mark labels hang vertically, would that be possible.

thank you.

1 Like
2

sorry I just found the solution by using this

style={‘color’: ‘blue’, ‘fontSize’: 14,‘writing-mode’: ‘vertical-rl’,‘text-orientation’: ‘upright’}

3 Likes
3

Nice, thanks for sharing writing-mode, I’ve never seen that before. Here are some more examples: https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation, it looks like: writingMode: 'vertical-rl', 'textOrientation: 'mixed' would be a good combination too.

For features like these, make sure to check out the browser compatibility: https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation#Browser_compatibility

4

Using ‘writing-mode’ and ‘text-orientation’ don’t seem to have the desired effect for me. This is i=how i’m using them:

html.Div([
                dcc.RangeSlider(
                    id='my-range-slider',
                    min=0,
                    max=noDays-1,
                    step=1,
                    value=[0, noDays-1], # default values
                    marks = dateDict,
                    updatemode='drag',
                )  # slider dcc
            ],
                style ={
                    'margin-bottom': '50px',
                    'margin-left': '20px',
                    'margin-right': '20px',
                    'writing-mode': 'vertical-lr',
                    'text-orientation': 'sideways'
                }
            ) # slider div

Any advise?

2 Likes
5

I think you should set the style of the markers within the dcc.RangeSlider component’s prop marks like for this example :

            marks={
                str(h): {'label': str(h), 'style': {'color': 'red'}}
                for h in range(0, 24)
            },

The style prop you provided in your post will apply to the html.Div component :slight_smile:

1 Like
6

Ah, I see! I wasn’t sure how to add style within the dcc, I understand the formatting now.

Thanks for your help!

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.