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')
I have two questions:
- Is there way to create some separation between sliders, so the label don’t overlap with markers;
- how to make the label to be inline with the slider (in the same row)