Slider Examples and Reference

Default Slider

An example of a default slider without any extra properties.

library(dash)
library(dashDaq)
library(dashHtmlComponents)

app <- Dash$new()

app$layout(htmlDiv(list(
  daqSlider(id = 'my-daq-slider-ex',
            value = 17),
  htmlDiv(id = 'slider-output')
)))

app$callback(
  output(id = "slider-output", property = "children"),
  params = list(input(id = "my-daq-slider-ex", property = "value")),

  update_output <- function(val) {
    return(sprintf("The slider is currently at %s", val))
  }
)

app$run_server()

Marks

Set custom marks on the slider using with marks.

library(dashDaq)

daqSlider(
    id = "my-daq-marks",
    min = 0,
    max = 100,
    value = 30,
    marks = list("25" = "mark", "50" = "50")
)

Size

Change the size of the slider using size.

library(dashDaq)

daqSlider(
    size = 50
)

Handle Label

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

library(dashDaq)

daqSlider(
    id = "my-daq-slider",
    value = 17,
    handleLabel = "Handle"
)

Step

Change the value of increments or decrements using step.

library(dashDaq)

daqSlider(
    min = 0,
    max = 100,
    value = 50,
    handleLabel = list("showCurrentValue" = TRUE, "label" = "VALUE"),
    step = 10
)

Vertical orientation

Make the slider display vertically by setting vertical=TRUE.

library(dashDaq)

daqSlider(
    vertical = TRUE
)

Slider Properties

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 (character; optional):
The ID used to identify this component in Dash callbacks.

marks (named list; 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 named list with keys:

  • number (named list; optional)

    number is a character | named list with keys:

    • label (character; optional)

    • style (named list; optional)

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

color is a character | named list with keys:

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

  • gradient (logical; 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 (named list; 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 named list with keys:

    • color (unnamed list of numerics; optional)

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

className (character; 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 (logical; optional):
If TRUE, the handles can’t be moved.

dots (logical; 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 (logical; optional):
If the value is TRUE, it means a continuous value is included.
Otherwise, it is an independent value.

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

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

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

vertical (logical; optional):
If TRUE, the slider will be vertical.

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

targets (named list; 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 named list with keys:

  • number (named list; optional)

    number is a character | named list with keys:

    • color (character; optional)

    • label (character; optional)

    • showCurrentValue (logical; optional)

    • style (named list; optional)

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

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

handleLabel is a character | named list with keys:

  • color (character; optional)

  • label (character; optional)

  • showCurrentValue (logical; optional)

  • style (named list; 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 (logical | character | numeric; 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 (unnamed 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.