Slider Examples and Reference


Default Slider

An example of a default slider without any extra properties.

import dash
from dash.dependencies import Input, Output
import dash_daq as daq
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    daq.Slider(
        id='my-daq-slider-ex-1',
        value=17
    ),
    html.Div(id='slider-output-1')
])

@app.callback(
    Output('slider-output-1', 'children'),
    Input('my-daq-slider-ex-1', 'value')
)
def update_output(value):
    return 'The slider is currently at {}.'.format(value)

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

Marks

Set custom marks on the slider using with marks.

import dash_daq as daq

daq.Slider(
    min=0, max=100, value=30,
    marks={'25': 'mark', '50': '50'}
)

Size

Change the size of the slider using size.

import dash_daq as daq

daq.Slider(
    size=50
)

Handle Label

Set the labels for the handle that is dragged with handleLabel.

import dash_daq as daq

daq.Slider(
    id='my-daq-slider',
    value=17,
    handleLabel='Handle'
)

Step

Change the value of increments or decrements using step.

import dash_daq as daq

daq.Slider(
    min=0,
    max=100,
    value=50,
    handleLabel={"showCurrentValue": True,"label": "VALUE"},
    step=10
)

Vertical orientation

Make the slider display vertically by setting vertical=True.

import dash_daq as daq

daq.Slider(
    vertical=True
)

Slider Properties

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

help(dash_daq.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 used to identify this component in Dash callbacks.

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

color (dict; default colors.DARKER_PRIMARY):
Color configuration for the slider’s track.

color is a string | dict with keys:

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. Note: dots are disabled
automatically when using color.ranges.

handleLabel (dict; optional):
Configuration of the slider handle’s label. Passing falsy value will
disable the label.

handleLabel is a string | dict with keys:

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

labelPosition (a value equal to: ‘top’ or ‘bottom’; default 'bottom'):
Where the component label is positioned.

marks (dict; optional):
Marks on the slider. The key determines the position, 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 keys:

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

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

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 (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’ 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.

size (number; default 265):
Size of the slider in pixels.

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

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

targets is a dict with keys:

theme (dict; default light):
Theme configuration to be set by a ThemeProvider.

updatemode (a value equal to: ‘mouseup’ or ‘drag’; default 'mouseup'):
Determines when the component should update its value. If mouseup,
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. Only use drag if your updates
are fast.

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

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