dcc.Slider

dcc.Slider is a component for rendering a slider. Users interact with a dcc.Slider by selecting areas on the rail or by dragging the handle.

The points displayed on a slider are called marks. They are autogenerated if not explicitly provided or turned off.

Examples

Find a few usage examples below.

For more examples of minimal Dash apps that use dcc.Slider, go to the community-driven Example Index.

Simple Slider Example

An example of a simple slider tied to a callback. The callback takes the slider’s currently selected value and outputs it to a html.Div.

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

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

app = Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    dcc.Slider(0, 20, 5,
               value=10,
               id='my-slider'
    ),
    html.Div(id='slider-output-container')
])

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

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

Min, Max, and Step

min, max, and step are the first three positional arguments in the example above. min sets a minimum value available for selection on the slider, max sets a maximum, and step defines the points for the slider between the min and the max. Keyword arguments can also be used. These examples of defining a dcc.Slider are equivalent:

dcc.Slider(0, 20, 5, value=10, id='my-slider')

dcc.Slider(min=0, max=20, step=5, value=10, id='my-slider')

dcc.Slider(id='my-slider', value=10, min=0, max=20, step=5)

dcc.Slider(min=0, max=20, step=5, value=10, id='my-slider')

Auto Generated Marks

By default, the dcc.Slider component adds marks if they are not specified, as in the example above. It uses the min and max and and the marks correspond to the step if you use one.

If you don’t supply step, Slider automatically calculates a step and adds around five marks. Labels for autogenerated marks are SI unit formatted.

from dash import dcc

dcc.Slider(0, 20)

Custom Marks

You can also define marks. 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. marks is a dict
where the keys represent the numerical values and the values represent their labels.

from dash import dcc

dcc.Slider(0, 10,
    step=None,
    marks={
        0: '0°F',
        3: '3°F',
        5: '5°F',
        7.65: '7.65°F',
        10: '10°F'
    },
    value=5
)

Turn Off Marks

You can turn off slider marks by setting marks=None:

from dash import dcc

dcc.Slider(0, 20, marks=None, value=10)

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.

from dash import dcc

# Slider has included=True by default
dcc.Slider(0, 100, value=65,
    marks={
        0: {'label': '0°C', 'style': {'color': '#77b0b1'}},
        26: {'label': '26°C'},
        37: {'label': '37°C'},
        100: {'label': '100°C', 'style': {'color': '#f50'}}
    }
)

from dash import dcc

dcc.Slider(0, 100, value=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
)

Non-Linear Slider and Updatemode

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

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

app = Dash(__name__, external_stylesheets=external_stylesheets)

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

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

@app.callback(Output('updatemode-output-container', 'children'),
              Input('slider-updatemode', 'value'))
def display_value(value):
    return 'Linear Value: {} | \
            Log Value: {:0.2f}'.format(value, transform_value(value))

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

Slider Tooltips

The tooltips property can be used to display the current value. The placement parameter controls
the position of the tooltip i.e. ‘left’, ‘right’, ‘top’, ‘bottom’. If always_visible=True is used, then
the tooltips will show always, otherwise it will only show when hovered upon.

from dash import dcc

dcc.Slider(0, 10, 1, value=5, marks=None,
    tooltip={"placement": "bottom", "always_visible": True})

Slider Properties

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

help(dash.dcc.Slider)
```

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.

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

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

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

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:

value (number; optional):
The value of the input.

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

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.

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

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

tooltip is a dict with keys:

updatemode (a value equal to: ‘mouseup’ or ‘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. If
you want different actions during and after drag, leave updatemode
as mouseup and use drag_value for the continuously updating value.

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.

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

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.

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

loading_state is a dict with keys:

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.

persisted_props (list of values equal to: ‘value’; 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_type (a value equal to: ‘local’, ‘session’ or ‘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.