'Need help on plotly dash python callback with input, out, button, graph

I'm new at plotly dash python. I need help updating the graph after input value and clicking the Set button. I tried many ways but I can't make it right. Also, the refresh button is to refresh the graph back to 0 input value. I'm so stuck here. Do I have to update the graph after the input or just update the value?

from dash import html, Dash, dcc, Input, Output, State
import plotly.express as px
import pandas as pd



app = Dash(__name__)



df = pd.DataFrame({
    "Minimum/Maximum":["Minimum", "Maximum"],
    "Numbers of Beat": [2,60]
    })
fig = px.bar(df, x = "Minimum/Maximum", y = "Numbers of Beat", color="Minimum/Maximum")

app.layout = html.Div(
    children=[
    html.H1(children= 'HTML Dashboard Application'),
    html.Div(children= 
             '''
             Dash: Minimum/Maximum Bar Graph
             '''),
    dcc.Graph(
        id='dash_graph',
        figure = fig
        ),
    html.Div(dcc.Input(placeholder='Enter a min value...' ,id='min_value', type='text')),
    html.Div(dcc.Input(placeholder='Enter a max value...' ,id='max_value', type='text')),
    html.Button(id='Set-val', n_clicks=0, children= 'Set'),
    html.Button(id='Refresh_current_BPM', n_clicks=0, children= 'Refresh'),
    ])
             
@app.callback(
    Output('dash_graph', 'figure'),
    Input('Set-val', 'n_clicks'),
    State('min_value', 'value'),
    State('max_value', 'value')
)
def update_value(min_value, max_value, n_clicks):
    #new value should appear in the graph here
    return fig
    
    
    

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


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source