Maximum Distance for Range Slider

Dash Python
1

Hello,

I am working on a dashboard that involves a range slider. I am aware of the argument pushable that allows a user to set a minimum distance between the lower bound and upper bound of the range slider. Is there an equivalent way of setting a “max” distance between upper and lower bounds?

Here is some example code I’ve produced:


#Import packages
import dash
from dash import dcc, html
import dash_bootstrap_components as dbc


app = dash.Dash()
server = app.server
app.layout = html.Div([
        dbc.Row([
            dbc.Col([
                dcc.RangeSlider(
                    id='range_slider',
                    min=1960,
                    max=2020,
                    step=1,
                    value=[2016, 2020],
                    allowCross=False,
                    pushable=2,
                    tooltip={"placement": "bottom", "always_visible": True},
                    marks={
                        1950: '1950',
                        1960: '1960',
                        1970: '1970',
                        1980: '1980',
                        1990: '1990',
                        2000: '2000',
                        2010: '2010',
                        2020: '2020'
                    }
                ),
            ],width=12)
        ])              
])      

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

It doesn’t look like there are any arguments in the documentation that can handle this logic. I would ideally like to set a maximum range of 10 between the upper and lower bound. If there isn’t an easy argument to add, is there a roundabout way of achieving this behavior?

Thank you!

2

Hi @plotme1
I don’t think that there is a way to do this with the current RangeSlider props, but you could probably create a callback that throws an alert/error if the gap between min and max is over 10.

1 Like