Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

dcc.Input type number min/max value

Is there any way to set min/max value for number input? The range I need is too large for precise dcc.Slider, so I have to set value with dcc.Input.

Normally HTML’s input tag have min/max attributes. Will those be implemented for dcc.Input, @chriddyp ? Or how can I workaround it?

Now I am using something like that:

html.P([
        'Quantity: ',
        dcc.Input(
            id='quantity-value',
            type='number',
            value='1'
        )
    ], id='quantity-p'),

@app.callback(
    Output('quantity', 'value'),
    [Input('quantity-p', 'n_clicks')],
    state=[State('quantity-value', 'value')])
def quantity_range_check(_, value):
    if int(value) < 1:
        return '1'
    else:
        return value

but with that solution, value ‘0’ pops in for a second and then get’s changed to ‘1’. It is ugly and error-prone, also user can input value manually without up and down buttons, that way he can insert any negative value he wants.

So. Is there any solution at the moment?

There isn’t a solution right now, but we should add all of the HTML attributes to these dcc components. That’ll get added here: https://github.com/plotly/dash-core-components/pull/41, within the next week or so.

1 Like