Add styling to dcc sliders

Dash Python
1

I have a Dash App that contains elements like in the sample code below. Without any CSS the html.label() is positioned above a slider. I am looking for the correct CSS code and potentially modifications of my app, so that the labels are next to the sliders.

Current state:
Label1
Slider1
Label2
Slider2

Desired state:
Label1 Slider1
Label2 Slider2

Edit: Ideally I would like to have an option to define in percent the width of the label and slider. E.g. 20% for the label and 80% for the slide.

Thank you very much for your help.

from dash import Dash, html, dcc
import dash_daq as daq

app = Dash(__name__)

app.layout = html.Div(
    [
        html.Div(
            [
                html.Div(children=[html.Label("slider 1"), html.Div(dcc.Slider(0.0, 1, step=0.1, value=0.0, id="dropout"))]),
                html.Div(children=[html.Label("slider 2"), html.Div(dcc.Slider(0.0, 1, step=0.1, value=30, id="slope"))]),
            ],
        ),
    ]
)

if __name__ == "__main__":
    app.run_server(debug=True, port=8883)
2

Hello @HansPeter123,

Here is something that makes use of flex box, will grow and shrink dynamically.

It places a priority on the label not shrinking. :slight_smile:

from dash import Dash, html, dcc
#import dash_daq as daq

app = Dash(__name__)

divFlex = {'display':'flex', 'alignContent':'stretch'}
labelFlex = {'flexShrink':0}
slideFlex = {'width':'100%'}

app.layout = html.Div(
    [
        html.Div(
            [
                html.Div(children=[html.Label("slider 1", style=labelFlex),
                                   html.Div(dcc.Slider(0.0, 1, step=0.1, value=0.0, id="dropout"),
                                            style=slideFlex)],
                         style=divFlex),
                html.Div(children=[html.Label("slider 2", style=labelFlex),
                                   html.Div(dcc.Slider(0.0, 1, step=0.1, value=30, id="slope"),
                                                       style=slideFlex)],
                         style=divFlex),
            ],
        ),
    ]
)

if __name__ == "__main__":
    app.run_server(debug=True, port=8883)
1 Like
3

Awesome this already very close. In my case the labels will have different lengths and I would like to insure I can set the allocated width for all labels to be identical. See this example:

Screenshot 2022-11-23 at 16.31.46
Screenshot 2022-11-23 at 16.31.462262×224 17.9 KB

How could I implement this?

4

Well, you have a few options:

  • Use something like dbc to help stylize the layout
  • Put the elements into separate divs and use flex
  • Put it into a table layout in which cause the largest cell would take priority
5

Actually this works fine as well.

divFlex = {"display": "flex", "align-content": "stretch"}

labelFlex = {"width": "20%"}

slideFlex = {"width": "80%"}
1 Like