How to hide dcc.RangeSlider

Dash Python
1

Hello community.
Now, i heeds to hide dcc.RangeSlider using output form callback function.
But, i didn’t find any information about it. Maybe, someone know, how to do it??

2 
@app.callback(Output('RangeSliderID', 'style'))

def hide_slider:
 return {'display':'none'}

works for me

3

Thank you for reply.
I tried to do this. But i got an error:

Attempting to assign a callback with
the property “style” but the component
“year-slider” doesn’t have “style” as a property.

Here is a list of the available properties in “year-slider”:
[‘id’, ‘marks’, ‘value’, ‘allowCross’, ‘className’, ‘count’, ‘disabled’, ‘dots’, ‘included’, ‘min’, ‘max’, ‘pushable’, ‘step’, ‘vertical’, ‘updatemode’, ‘loading_state’]

My code is:

@app.callback(Output(‘year-slider’,‘style’), [Input(‘production_period_chose’,‘value’)])
def hide_mode_slider(selected_period):
if selected_period == ‘min’:

    return {'display':'none'}
else:
    
    return {'display':'inline-block'}
4

That’s very strange.
How did you define your slider.
Mine is defined as

app.layout = html.Div([dcc.Slider(
            id='track_length_selector',
            min=0,
            max=10,
            step=1,
            value=7,
            marks={0:'0',
                   5:'5',
                   10:'10'})])

Btw. add tripple ` (```) above and below your code in the forum for nicer formatting :wink:

5

I defined it in this way:

dcc.RangeSlider(
                id='year-slider',
                min=0,
                max=10,
                #dots=False,
                updatemode='drag',
                value=[0,10],
            )

Also, i did nit find “Style” in slider`s documentation.
https://dash.plot.ly/dash-core-components/rangeslider
Maybe, this problem connected with version of dash_core_components. What version do you use??

6

You can use ClassName

In your css:

.hidden {
display: none !important;
}

In your callback:

@app.callback(Output(‘RangeSliderID_container’, child’))

def hide_slider:
return dcc.RangeSlider(
id=‘year-slider’,
className = ‘hidden’
)