Is this a slider bug?

Dash Python
1

I have a table with a lot of figures. These figures are composed of data that changes over time. I added a slider below each figure to adjust the range of the x-axis display. But when I click on the label in the slide, it doesn’t change according to my click. But there is no problem when there is only one slider.below is my test code and the GIF.

import dash_core_components as dcc
import dash_html_components as html
import dash
app = dash.Dash(__name__)


def generate_dataset_table(columns, rows):
    th = [html.Th('test', style={'width': '300px', 'max-width': '300px'})]
    trs = [html.Tr(th + [html.Th(col) for col in range(columns)])]
    for row in range(rows):
        td = [html.Td(html.Div(children="first column",
                               style={'text-align': 'center', 'width': '300px', 'max-width': '300px'}))]
        for column in range(columns):
            td.append(generate_figure(column, row))
        trs.append(html.Tr(td))
    dataset_dashboard = html.Div(children=[
        html.Table(children=trs, className='dashboard')],
        style={'display': 'inline-table', 'margin-left': '8%', 'margin-right': '8%'})
    return dataset_dashboard


def generate_figure(column, row):
    figure = html.Td(html.Div(children=[
        dcc.Graph(
            id='{}-{}-graph'.format(column, row),
            style={'width': '600px'}
        ),
        html.Br(),
        dcc.Slider(
            id='{}-{}-slider'.format(column, row),
            min=0,
            max=9,
            marks={i: 'Label {}'.format(i) for i in range(10)},
            value=5,
            className='slider'
        ),
        html.Br()
    ]))
    return figure


app.layout = generate_dataset_table(2, 1)
if __name__ == '__main__':
    app.run_server(debug=True, port=5000)

12
12.gif677×547 101 KB

2

To me, it looks like you do not have a connection between whatever you select on the slider, and the axes property in your graph.

You need to make a callback hooked up the the value property of the slider.

@app.callback(
   Output('id of Div container where you put your Graph', 'children'),
   [Input('id of the dcc.Slider', 'value')]
)
def display_graphs(value):
   generate_figure(column, row, value):
      #here you do all your create plot stuff
      # Use https://plot.ly/python/axes/ to find how to define axis range and let it depend
      # on the value you get from the slider

Hope this helps. :slight_smile:

3

Thank you for your answer Blaceus. I tried to bind a callback to the slider.but it seems no effect. The result I finally found is When I need to drag my window horizontally，there will be such a problem, when all the sliders are inside the window with no dragging, it works well. It looks very strange, I finally adopted other method to instead slider. Thanks again.