Center alignment for html.Div/dcc.Slider

Dash Python
1

Hello,

I know that this might be a simple question, but is there a way to centralize a dcc.Slider in a Dash app?
I tried this but it’s not working:

        html.Div([
        dcc.Slider(
                    id='years-slider',
                    min=min(years),
                    max=max(years),
                    value=min(years),
                    marks={str(year): str(year) for year in years_by_step},
                )
        ], style={'width':'75%', 'margin':25, 'textAlign': 'center'})

Kind regards,
Renan

2

One thing you could do, using the CSS Skeleton kit is something like this, using Skeletons Grid system

html.Div(
   className='row',
   children=[
      html.Div(className='two columns', style={'display': 'inline-block'}),
      dcc.Slider( .... your code...., className='ten columns', style={'display': 'inline-block'})
   ]
)

Dont know if this works though, the Slider element is a little weird. Try using the Firefox/Chrome developer tools inspector to identify the element which you need to actually adress. You can also include a local CSS in your Dash app and then write your CSS there. It’s somewhere on the forum.

3

Thanks, but I didn’t work. Actually dss.Slider doesn’t support a ‘style’ argument.

4

Theeen, wrap it in another div, make it 100%? :smiley:

5

In general, I guess it would be nice to give the Slider component a few more attributes to handle this kind of stuff more easily. CSS styling is tedious with it in general…

6

Yes… I agree with you… I wrapped into another div as you suggested, but I didn’t work again. Thank you very much! However, right now, my team are leaving Dash for a moment to develop the web app using raw plotly.js. I hope Dash will improve with time with proper documentation and more flexibility of the components, specially in terms of UI.

Best.

7

Hello, I know this issue is quite old but I had the same one and found a way to fix it:

  1. include the dcc.RangeSlider in a div
  2. give some style attributes, namely the width, and the padding-left and padding.right, as relative values. For instance:

html.Div(children=[
dcc.RangeSlider(
id=‘range-slider-1’,
min=…,
max=…,
marks=…,
], style={‘width’: ‘96%’,‘padding-left’:‘3%’, ‘padding-right’:‘1%’}),

Other properties such as margin auto, display inline, text-align center, didnt work. Padding does.

KR

1 Like
8

Hello,
You can always centralize everything inside particular Div:

html.Div([
dcc.Slider(
id=‘years-slider’,
min=min(years),
max=max(years),
value=min(years),
marks={str(year): str(year) for year in years_by_step},
)
], style = {‘width’: ‘100%’, ‘display’: ‘flex’, ‘align-items’: ‘center’, ‘justify-content’: ‘center’})

11 Likes
10

Just spent hours trying to figure this out thank you

1 Like
11

Thanks, I had problems to align a LEDDisplay in the center of a div and this solution works. !!

12

Hi, I know this is super late but just for begginners like me, there is a function ‘dash.html.Center()’, it makes miracles in this sense, you can use it with bootstrap, core or basic html components, basicly with everything I think!