# Knob Examples and Reference

### Default Knob

An example of a default Knob 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_knob(
          id="my-knob",
      ),
      html_div(id="knob-output")
    ])

    callback!(app,
      Output("knob-output", "children"),
      [Input("my-knob", "value")]) do value
      return "The knob value is $value."
    end
    run_server(app, "0.0.0.0", debug=true)

The knob value is None.

### Size

Set the size(diameter) of the knob in pixels with `size`.

    using Dash
    using DashDaq

    app = dash()

    app.layout = daq_knob(
      size=140,
      value=3
    )

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

### Max

Set the maximum value of the knob using `max`.

    using Dash
    using DashDaq

    app = dash()

    app.layout = daq_knob(
      max=100,
      value=3
    )

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

### Color Ranges

Control color ranges with:

    color = Dict(
        "ranges" => Dict(
            "<color>" => [<value>,<value>],
            "<color>" => [<value>,<value>],
            "<color>" => [<value>,<value>]
        )
    )

    using Dash
    using DashDaq

    app = dash()

    app.layout = daq_knob(
      label="Color Ranges",
      value=3,
      color=Dict("ranges" => Dict("green" => [0,5],"yellow" => [5,9],"red" => [9,10]))
    )

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

Color Ranges

### Color Gradient

Set up a color gradient with:

    color = Dict(
        "gradient" =>  true,
        "ranges" => Dict(
            "<color>" => [<value>,<value>],
            "<color>" => [<value>,<value>],
            "<color>" => [<value>,<value>]
        )
    )

    using Dash
    using DashDaq

    app = dash()

    app.layout = daq_knob(
      label="Gradient Ranges",
      value=7,
      color=Dict("gradient" => true,"ranges" => Dict("green" => [0,5],"yellow" => [5,9],"red" => [9,10]))
    )

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

Gradient Ranges

### Scale

Adjust the scale interval, label interval, and start of the scale with `scale`.

    using Dash
    using DashDaq

    app = dash()

    app.layout = daq_knob(
      label="Scale",
      value=7,
      max=18,
      scale=Dict("start" => 0, "labelInterval" =>  3, "interval" =>  3)
    )

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

Scale

## Knob 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 compnent in Dash callbacks.

`value` (Real; optional): The value of knob.

`color` (Dict; optional): Color configuration for the knob's track.

`color` is a String | Dict with keys:

- `default` (String; optional): Color used for current value text and other minor accents.

- `gradient` (Bool; optional): Display ranges as a gradient between given colors.

- `ranges` (Dict; optional): Define multiple color ranges on the knob's track. The key determines the color of the range and the value is the start,end of the range itself. Ranges must be contiguous along the entirety of the knob's range of values.

  `ranges` is a Dict with keys:

  - `color` (Array of Reals; optional)

`size` (Real; default `114`): The size (diameter) of the knob in pixels.

`min` (Real; default `0`): The minimum value of the knob.

`max` (Real; default `10`): The maximum value of the knob.

`disabled` (Bool; optional): If true, knob cannot be moved.

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

`label` (Dict; optional): Description to be displayed alongside the control. To control styling, pass an object with label and style properties.

`label` is a String | Dict with keys:

- `label` (String; optional)

- `style` (Dict; optional)

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

`scale` (Dict; optional): Configuration for the component scale.

`scale` is a Dict with keys:

- `custom` (Dict; optional): Custom scale marks. 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.

  `custom` is a Real | Dict with keys:

  - `label` (String; optional)

  - `style` (String; optional)

- `interval` (Real; optional): Interval by which the scale goes up. Attempts to dynamically divide min-max range by default.

- `labelInterval` (Real; optional): Interval by which labels are added to scale marks. Defaults to 2 (every other mark has a label).

- `start` (Real; optional): Value to start the scale from. Defaults to min.

`className` (String; optional): Class to apply to the root component element.

`style` (Dict; optional): Style to apply to the root component element.

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

`showCurrentValue` (Bool; optional): show current value of knob.

`textColor` (String; optional): text color of scale.

`digits` (Real; optional): number of digits to show after decimal places.