# 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()

The slider is currently at 17.

### 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")
    )

mark 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"
    )

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
    )

VALUE
50

### 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.

`style` (named list; default `{ display: 'flex', justifyContent: 'center' }`): Style to apply to the root component element.

`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.

`fullSize` (logical; optional): make slider same size of its parent.