Slider Examples and Reference


Default Slider

An example of a default slider without any extra properties.

from dash import Dash, html, Input, Output, callback
import dash_daq as daq

app = Dash(__name__)

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

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

if __name__ == '__main__':
    app.run(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.

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:

  • number (dict; optional)

    number is a string | dict with keys:

    • label (string; optional)

    • style (dict; optional)

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

color is a string | dict with keys:

  • default (string; optional):
    Fallback color to use when color.ranges has gaps.

  • gradient (boolean; optional):
    Display ranges as a gradient between given colors. Requires
    color.ranges to be contiguous along the entirety of the gauge’s
    range of values.

  • ranges (dict; optional):
    Define multiple color ranges on the slider’s track. The key
    determines the color of the range and the value is the start,end
    of the range itself.

    ranges is a dict with keys:

    • color (list of numbers; optional)

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

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

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

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.

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

min (number; default 0):
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.

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

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

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:

  • number (dict; optional)

    number is a string | dict with keys:

    • color (string; optional)

    • label (string; optional)

    • showCurrentValue (boolean; optional)

    • style (dict; optional)

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

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

handleLabel is a string | dict with keys:

  • color (string; optional)

  • label (string; optional)

  • showCurrentValue (boolean; optional)

  • style (dict; optional)

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.

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.