Slider Examples and Reference


Default Slider

An example of a default slider without any extra properties.

import dash
import dash_daq as daq
import dash_html_components as html

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

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

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


@app.callback(
    dash.dependencies.Output('slider-output', 'children'),
    [dash.dependencies.Input('my-daq-slider-ex', '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)
```

id (string; optional): The ID used to identify this component in Dash callbacks

color (dict; default colors.DARKER_PRIMARY): Color configuration for the slider’s track. color has the following type: string | dict containing keys ‘default’, ‘gradient’, ‘ranges’. Those keys have the following types:

  • 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 has the following type: dict containing keys ‘color’. Those keys have the following types: - color (list of numbers; optional)

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

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 has the following type: string | dict containing keys ‘showCurrentValue’, ‘label’, ‘color’, ‘style’. Those keys have the following types:

  • showCurrentValue (boolean; optional)
  • label (string; optional)
  • color (string; optional)
  • style (dict; optional)

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’, ‘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 has the following type: dict containing keys ‘number’. Those keys have the following types:

  • number (dict; optional): number has the following type: string | dict containing keys ‘style’, ‘label’. Those keys have the following types: - style (dict; optional) - label (string; optional)

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

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 has the following type: dict containing keys ‘number’. Those keys have the following types:

  • number (dict; optional): number has the following type: string | dict containing keys ‘showCurrentValue’, ‘label’, ‘color’, ‘style’. Those keys have the following types: - showCurrentValue (boolean; optional) - label (string; optional) - color (string; optional) - style (dict; optional)

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

updatemode (a value equal to: ‘mouseup’, ‘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.