How to create space between sliders

Dash Python
1

I am trying to stack several sliders on one side of the dashboard, but the labels is overlapping with markers of the sliders.

app = dash.Dash()

app.layout = html.Div(
    html.Div([
        html.Label('Media Mix'), 
        html.Label('CCTV/PSTV:'),
        dcc.Slider(
                id='tv',
                min=-0.1,
                max=0.1, 
                step=0.01,
                value=0.,
                marks = {i: '{:.0%}'.format(i) for i in np.linspace(-0.1,0.1,10)}
             ),
        html.Label('OOH:'),
        dcc.Slider(
                id='ooh',
                min=-0.1,
                max=0.1, 
                step=0.01,
                value=0.,
                marks = {i: '{:.0%}'.format(i) for i in np.linspace(-0.1,0.1,10)}
             ),
        html.Label('Digital Display:'),
        dcc.Slider(
                id='digitaldisplay',
                min=-0.1,
                max=0.1, 
                step=0.01,
                value=0.,
                marks = {i: '{:.0%}'.format(i) for i in np.linspace(-0.1,0.1,10)}
             ),
        html.Label(''),
        html.Label('Search:'),
        dcc.Slider(
                id='search',
                min=-0.1,
                max=0.1, 
                step=0.01,
                value=0.,
                marks = {i: '{:.0%}'.format(i) for i in np.linspace(-0.1,0.1,10)}
             ),
    ], className='two columns'),

)

app.css.append_css({
    'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})
app.run_server(port='8000')

Screenshot%20from%202018-10-30%2014-05-46
I have two questions:

  1. Is there way to create some separation between sliders, so the label don’t overlap with markers;
  2. how to make the label to be inline with the slider (in the same row)
2

Wrap the sliders in Div objects and add margin top or bottom in the div style property or set it in your CSS sheet and reference that through the className property of the div.

1 Like
3

What apisoni said, or try and put html.Br between each dcc component (this is an ugly implementation but might fast and might work).

1 Like