How to drag slider range with constant value

Dash Python
1

I have a range slider with price range 2 to 15000
I want to apply a filter based on slider values . given constant range lets say 200

so initial filter is at value is 2 to 202
but when i drag the slider it should be lets say 200 to 400

Is it possible ?

2

Hi @yogi_dhiman, isn’t the step property exactly for this? Try setting step=200

If you want a range of 200, maybe you could just the Rangeslider and set the range to 200.

EDIT2: Using only the step argument of dcc.Slider() is not going to work. If you set step=200 , the returned value will always be a multiple of step

here a basic idea:

from dash import Dash,  html, dcc, Input, Output, State

app = Dash(__name__)

app.layout = html.Div([
    dcc.Slider(
        id='slide',
        min=200,
        max=2000,
        step=1,
        marks={i*100: str(i*100) for i in range(21)}

    ),
    dcc.RangeSlider(
        id='r_slide',
        min=0,
        max=2000,
        step=1,
        marks={i*100: str(i*100) for i in range(21)},
        value=[0, 200],
        pushable=False,
        allowCross=False

    ),
    html.Div(id='dummy'),
    html.Div(id='dummy2')
])


app.clientside_callback(
    """
    function(slider, slider_max) {
        min_val = slider
        max_val = slider + 200
        if (max_val > slider_max) {
            max_val = slider_max
        }
        return ["min: ", min_val, " max: ", max_val]
    }
    """,
    Output('dummy', 'children'),
    Input('slide', 'value'),
    State('slide', 'max'),
    prevent_initial_call=True
)


app.clientside_callback(
    """
    function(r_slider, r_slider_max) {
        min_val = r_slider[0]
        max_val = r_slider[0] + 200
        if (max_val > r_slider_max) {
            max_val = r_slider_max
        }        return [[min_val, max_val], [min_val, max_val]]
    }
    """,
    Output('dummy2', 'children'),
    Output('r_slide', 'value'),
    Input('r_slide', 'value'),
    State('r_slide', 'max'),
    prevent_initial_call=True
)

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