RangeSlider Examples and Reference

Simple RangeSlider Example

An example of a basic RangeSlider tied to a callback.

import dash
import dash_html_components as html
import dash_core_components as dcc

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
    dcc.RangeSlider(
        id='my-range-slider',
        min=0,
        max=20,
        step=0.5,
        value=[5, 15]
    ),
    html.Div(id='output-container-range-slider')
])


@app.callback(
    dash.dependencies.Output('output-container-range-slider', 'children'),
    [dash.dependencies.Input('my-range-slider', 'value')])
def update_output(value):
    return 'You have selected "{}"'.format(value)


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

Marks and Steps

If slider marks are defined and step is set to None then the slider will only be able to select values that have been predefined by the marks. Note that the default is step=1, so you must explicitly specify None to get this behavior.

import dash_design_kit as ddk
import dash_core_components as dcc

dcc.RangeSlider(
    min=0,
    max=10,
    step=None,
    marks={
        0: '0 °F',
        3: '3 °F',
        5: '5 °F',
        7.65: '7.65 °F',
        10: '10 °F'
    },
    value=[3, 7.65]
)  

Included and Styling Marks

By default, included=True, meaning the rail trailing the handle will be highlighted. To have the handle act as a discrete value set included=False. To style marks, include a style css attribute alongside the key value.

import dash_design_kit as ddk
import dash_core_components as dcc

# RangeSlider has included=True by default
dcc.RangeSlider(
    min=0,
    max=100,
    value=[10, 65],
    marks={
        0: {'label': '0°C', 'style': {'color': '#77b0b1'}},
        26: {'label': '26°C'},
        37: {'label': '37°C'},
        100: {'label': '100°C', 'style': {'color': '#f50'}}
    }
)  
import dash_design_kit as ddk
import dash_core_components as dcc

dcc.RangeSlider(
    min=0,
    max=100,
    value=[10, 65],
    marks={
        0: {'label': '0°C', 'style': {'color': '#77b0b1'}},
        26: {'label': '26°C'},
        37: {'label': '37°C'},
        100: {'label': '100°C', 'style': {'color': '#f50'}}
    },
    included=False
)  

Multiple Handles

To create multiple handles just define more values for value!

import dash_design_kit as ddk
import dash_core_components as dcc

dcc.RangeSlider(
    min=0,
    max=30,
    value=[1, 3, 4, 5, 12, 17]
)

Pushable Handles

The pushable property is either a boolean or a numerical value. The numerical value determines the minimum distance between the handles. Try moving the handles around!

import dash_design_kit as ddk
import dash_core_components as dcc
dcc.RangeSlider(
    min=0,
    max=30,
    value=[8, 10, 15, 17, 20],
    pushable=2
)

Crossing Handles

If allowCross=False, the handles will not be allowed to cross over each other

import dash_design_kit as ddk
import dash_core_components as dcc

dcc.RangeSlider(
    min=0,
    max=30,
    value=[10, 15],
    allowCross=False
)

Non-Linear Slider and Updatemode

Create a logarithmic slider by setting marks to be logarithmic and adjusting the slider’s output value in the callbacks. The updatemode property allows us to determine when we want a callback to be triggered. The following example has updatemode='drag' which means a callback is triggered everytime the handle is moved. Contrast the callback output with the first example on this page to see the difference.

import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import *
import dash

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)


# Use the following function when accessing the value of 'my-range-slider'
# in callbacks to transform the output value to logarithmic
def transform_value(value):
    return 10 ** value


app.layout = html.Div([
    dcc.RangeSlider(
        id='non-linear-range-slider',
        marks={i: '{}'.format(10 ** i) for i in range(4)},
        max=3,
        value=[0.1, 2],
        dots=False,
        step=0.01,
        updatemode='drag'
    ),
    html.Div(id='output-container-range-slider-non-linear', style={'margin-top': 20})
])


@app.callback(
    Output('output-container-range-slider-non-linear', 'children'),
    Input('non-linear-range-slider', 'value'))
def update_output(value):
    transformed_value = [transform_value(v) for v in value]
    return 'Linear Value: {}, Log Value: [{:0.2f}, {:0.2f}]'.format(
        str(value),
        transformed_value[0],
        transformed_value[1]
    )


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

RangeSlider Properties

Access this documentation in your Python terminal with:
```python

help(dash_core_components.RangeSlider)
```

Our recommended IDE for writing Dash apps is Dash Enterprise’s
Data Science Workspaces,
which has typeahead support for Dash Component Properties.
Find out if your company is using
Dash Enterprise
.

id (string; optional):
The ID of this component, used to identify dash components in
callbacks. The ID needs to be unique across all of the components
in an app.

allowCross (boolean; optional):
allowCross could be set as True to allow those handles to cross.

className (string; optional):
Additional CSS class for the root DOM node.

count (number; optional):
Determine how many ranges to render, and multiple handles will be
rendered (number + 1).

disabled (boolean; optional):
If True, the handles can’t be moved.

dots (boolean; optional):
When the step value is greater than 1, you can set the dots to
True if you want to render the slider with dots.

drag_value (list of numbers; optional):
The value of the input during a drag.

included (boolean; optional):
If the value is True, it means a continuous value is included.
Otherwise, it is an independent value.

loading_state (dict; optional):
Object that holds the loading state object coming from
dash-renderer.

loading_state is a dict with keys:

  • component_name (string; optional):
    Holds the name of the component that is loading.

  • is_loading (boolean; optional):
    Determines if the component is loading or not.

  • prop_name (string; optional):
    Holds which property is loading.

marks (dict; optional):
Marks on the slider. The key determines the position (a number),
and the value determines what will show. If you want to set the
style of a specific mark point, the value should be an object
which contains style and label properties.

marks is a dict with strings as keys and values of type string |
dict with keys:

  • label (string; optional)

  • style (dict; optional)

max (number; optional):
Maximum allowed value of the slider.

min (number; optional):
Minimum allowed value of the slider.

persisted_props (list of a value equal to: ‘value’s; default \['value'\]):
Properties whose user interactions will persist after refreshing
the component or the page. Since only value is allowed this prop
can normally be ignored.

persistence (boolean | string | number; optional):
Used to allow user interactions in this component to be persisted
when the component - or the page - is refreshed. If persisted is
truthy and hasn’t changed from its previous value, a value that
the user has changed while using the app will keep that change, as
long as the new value also matches what was given originally.
Used in conjunction with persistence_type.

persistence_type (a value equal to: ‘local’, ‘session’, ‘memory’; default 'local'):
Where persisted user changes will be stored: memory: only kept in
memory, reset on page refresh. local: window.localStorage, data is
kept after the browser quit. session: window.sessionStorage, data
is cleared once the browser quit.

pushable (boolean | number; optional):
pushable could be set as True to allow pushing of surrounding
handles when moving an handle. When set to a number, the number
will be the minimum ensured distance between handles.

step (number; optional):
Value by which increments or decrements are made.

tooltip (dict; optional):
Configuration for tooltips describing the current slider values.

tooltip is a dict with keys:

  • always_visible (boolean; optional):
    Determines whether tooltips should always be visible (as
    opposed to the default, visible on hover).

  • placement (a value equal to: ‘left’, ‘right’, ‘top’, ‘bottom’, ‘topLeft’, ‘topRight’, ‘bottomLeft’, ‘bottomRight’; optional):
    Determines the placement of tooltips See
    https://github.com/react-component/tooltip#api top/bottom{*}
    sets the origin of the tooltip, so e.g. topLeft will in
    reality appear to be on the top right of the handle.

updatemode (a value equal to: ‘mouseup’, ‘drag’; default 'mouseup'):
Determines when the component should update its value property.
If mouseup (the default) then the slider will only trigger its
value when the user has finished dragging the slider. If drag,
then the slider will update its value continuously as it is being
dragged. Note that for the latter case, the drag_value property
could be used instead.

value (list of numbers; optional):
The value of the input.

vertical (boolean; optional):
If True, the slider will be vertical.

verticalHeight (number; default 400):
The height, in px, of the slider if it is vertical.