Black Lives Matter. Please consider donating to Black Girls Code today.

Disable tab with callback doesn't work

Hi everyone,

I have an issue with the disabling of a tab with using a callback. The app below is supposed to load with tab 2 disabled. Tab 2 is supposed to be unabled whenever the user selects a price different from 0 with the slider. However, the tab is never disabled whenever I load the app.

Some help would be welcome !

Thanks in advance,
Antoine

Here is the script :

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

app.layout = html.Div([

dcc.Tabs(id='main_tab', children=[
     
    dcc.Tab(id='tab_1', 
            label='TAB 1',
            style={
                   'color':'black',
                   'border-radius':'10px 10px 10px 10px',
                   'marginLeft':50,
                   },
            selected_style={
                            'color':'black',
                            'border-radius':'10px 10px 10px 0px',
                            'marginLeft':50,
                            },
            children=[
                    
                html.Br(),
        
                html.Div(id='slider_output_price',
                         style={'display':'inline-block',
                                'width':'83.75%',
                                'font-size': 14,
                                'marginLeft':20}),   
        
                html.Br(),     
                
                html.Div([
                    dcc.Slider(id='price',
                                min=0,
                                max=1000000,
                                step=5000,
                                value=0,
                                marks={
                                    0: {'label': '0€'},
                                    250000: {'label': ''},
                                    500000: {'label': ''},
                                    750000: {'label': ''},
                                    1000000: {'label': '1M'}},
                                updatemode='drag'),
        ],
            style={'marginLeft':20,
                   'width':'90%',
                   'font-size': 14}),
    ]),
                    
    # Titre onglet
    dcc.Tab(id='tab_2', 
            label="TAB 2",
            style={
                   'color':'black',
                   'border-radius':'10px 10px 10px 10px',
                   'marginLeft':5,
                   },
            selected_style={
                            'color':'black',
                            'border-radius':'10px 10px 10px 0px',
                            'marginLeft':5,
                            },
            disabled_style={
                            'color':'grey',
                            'border-radius':'10px 10px 10px 0px',
                            'marginLeft':5,
                            },                        
            children=[
        ]),
    ]),
])                        

activation tab 2

@app.callback(
[Output(component_id=‘tab_2’, component_property=‘disabled’)],
[Input(component_id=‘price’, component_property=‘value’)]
)
def disable_tab_2(price):
if price == 0:
disabled = True
else:
disabled = False
return disabled

display slider price

@app.callback(
Output(component_id=‘slider_output_price’, component_property=‘children’),
[Input(component_id=‘price’, component_property=‘value’)],
)
def slider_net_vendeur(value_price):
return ‘price : {0:,} €’.format(value_price).replace(’,’, ’ ')

if name == ‘main’:
app.run_server(debug=False)