Padding in Slider

Dash Python
1

Hi Everyone,

I am trying to display a dcc.Slider inline with other elements (e.g. RadioButtons). However, the default padding-bottom seems to override my custom CSS. I tried assigning a className to dcc.Slider, wrapping it in Div container and adding inline CSS for that container - neither works for me. I can stylize other properties through a custom class (e.g. background-color), it’s just padding that does not work. What am I missing here?

This is how it looks
image

This is how I want it
image

2

Hi @barrios styling of these components causes headaches sometimes. I usually wrap them into divs. The margin I added is actually not necessary. Could be related to the rest of your layout…

import dash
from dash import dcc, html


app = dash.Dash(
    __name__,
    external_stylesheets=[
        "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
    ]
)

app.layout = html.Div(
    className='row',
    children=[
        html.Div(
            className='col-6',
            children=[
                html.Div(
                    children=dcc.RangeSlider(min=0, max=10),
                    style={'marginTop': '100px'})
            ]
        ),
        html.Div(
            className='col-6',
            children=[
                html.Div(
                    children=dcc.RadioItems(options=[1,2], inline=True),
                    style={'marginTop': '100px'}
                )
            ]
        )
    ]
)


if __name__ == '__main__':
    app.run(debug=True)

image
image1027×266 3.28 KB

3

The Bootstrap Components layout components (Row() and Col()) also align these nicely

app = Dash(__name__,external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container(
    dbc.Row([
        dbc.Col(
            dbc.RadioItems([0, 1],value=0,inline=True), 
            width="auto"  # Shrink to content width
        ),
        dbc.Col(
            dcc.RangeSlider(0, 20, 1, value=[5, 15]),
            width=True  # Use remaining available space. Cannot use "auto" with RangeSlider
        )
    ], className="py-3"  # Add some top and bottom padding to both
    ),
)

(Layout - dbc docs)

1 Like