# Slider Examples and Reference

### Default Slider

An example of a default slider without any extra properties.

    using Dash
    using DashDaq

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

    app = dash(external_stylesheets=external_stylesheets)

    app.layout =  html_div([
      daq_slider(
          id="my-daq-slider-ex",
          value=17
      ),
      html_div(id="slider-output")
    ])

    callback!(app,
      Output("slider-output", "children"),
      [Input("my-daq-slider-ex", "value")]) do value
      return "The slider is currently at $value."
    end

    run_server(app, "0.0.0.0", debug=true)

The slider is currently at 17.

### Marks

Set custom marks on the slider using with `marks`.

    using Dash
    using DashDaq

    app = dash()

    app.layout = daq_slider(
      min=0, max=100, value=30,
      marks=Dict("25" =>  "mark", "50" =>  "50")
    )

    run_server(app, "0.0.0.0", debug=true)

mark 50

### Size

Change the size of the slider using `size`.

    using Dash
    using DashDaq

    app = dash()

    app.layout = daq_slider(
      size=50
    )

    run_server(app, "0.0.0.0", debug=true)

### Handle Label

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

    using Dash
    using DashDaq

    app = dash()

    app.layout = daq_slider(
      id="my-daq-slider",
      value=17,
      handleLabel="Handle"
    )

    run_server(app, "0.0.0.0", debug=true)

Handle

### Step

Change the value of increments or decrements using `step`.

    using Dash
    using DashDaq

    app = dash()

    app.layout = daq_slider(
      min=0,
      max=100,
      value=50,
      handleLabel=Dict("showCurrentValue" =>  true,"label" => "VALUE"),
      step=10
    )

    run_server(app, "0.0.0.0", debug=true)

VALUE
50

### Vertical orientation

Make the slider display vertically by setting `vertical=true`.

    using Dash
    using DashDaq

    app = dash()

    app.layout = daq_slider(
      vertical=true
    )

    run_server(app, "0.0.0.0", debug=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` (String; optional): The ID used to identify this component in Dash callbacks.

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

`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` (Bool; 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` (Array of Reals; optional)

`value` (Real; 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` (Bool; optional): If true, the handles can't be moved.

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

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

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

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

`vertical` (Bool; optional): If true, the slider will be vertical.

`size` (Real; 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` (Bool; 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` (Bool; 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` (Bool | String | Real; 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` (Array 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` (Bool; optional): make slider same size of its parent.