An example of a basic slider 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.Slider(
id='my-slider',
min=0,
max=20,
step=0.5,
value=10,
),
html.Div(id='slider-output-container')
])
@app.callback(
dash.dependencies.Output('slider-output-container', 'children'),
[dash.dependencies.Input('my-slider', 'value')])
def update_output(value):
return 'You have selected "{}"'.format(value)
if __name__ == '__main__':
app.run_server(debug=True)
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.
import dash_core_components as dcc
dcc.Slider(
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=5
)
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_core_components as dcc
# Slider has included=True by default
dcc.Slider(
min=0,
max=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'}}
}
)
import dash_core_components as dcc
dcc.Slider(
min=0,
max=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
)
Create a logarithmic slider by setting the labels of the marks
property 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. The default setting is mouseup
which triggers the callback when you release your mouse from the slider.
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
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-slider'
# in callbacks to transform the output value to logarithmic
def transform_value(value):
return 10 ** value
app.layout = html.Div([
dcc.Slider(
id='slider-updatemode',
marks={i: '{}'.format(10 ** i) for i in range(4)},
max=3,
value=2,
step=0.01,
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)
Rather than changing the updatemode of the slider, you can also use drag_value
an an input. This makes it possible to react differently to drag and mouseup.
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import dash
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
dcc.Slider(id='slider-drag'),
html.Div(id='slider-drag-output', style={'margin-top': 20})
])
@app.callback(Output('slider-drag-output', 'children'),
[Input('slider-drag', 'drag_value'), Input('slider-drag', 'value')])
def display_value(drag_value, value):
return 'drag_value: {} | value: {}'.format(drag_value, value)
if __name__ == '__main__':
app.run_server(debug=True)
Access this documentation in your Python terminal with:
```pythonhelp(dash_core_components.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.
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.
className
(string; optional): Additional CSS class for the root DOM node
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.
loading_state
(dict; optional): Object that holds the loading state object coming from dash-renderer. loading_state has the following type: dict containing keys ‘is_loading’, ‘prop_name’, ‘component_name’. Those keys have the following types:
is_loading
(boolean; optional): Determines if the component is loading or not prop_name
(string; optional): Holds which property is loading component_name
(string; optional): Holds the name of the component that is loadingmarks
(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 has the following type: dict with strings as keys and values of type string | dict containing keys ‘label’, ‘style’. Those keys have the following types:
label
(string; optional) style
(dict; optional)min
(number; optional): Minimum allowed value of the slider
max
(number; optional): Maximum allowed value of the slider
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 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_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.
step
(number; optional): Value by which increments or decrements are made
tooltip
(dict; optional): Configuration for tooltips describing the current slider value. tooltip has the following type: dict containing keys ‘always_visible’, ‘placement’. Those keys have the following types:
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 handleupdatemode
(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. If you want different actions during and after drag, leave updatemode
as mouseup
and use drag_value
for the continuously updating value.
value
(number; 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.