# Thermometer Examples and Reference

### Default Thermometer

An example of a default Thermometer 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_thermometer(
          id="my-thermometer",
          value=5,
          min=0,
          max=10,
          style=Dict(
              "margin-bottom" => "5%"
          )
      ),
      dcc_slider(
          id="thermometer-slider",
          value=5,
          min=0,
          max=10,

      ),
    ])

    callback!(app,
      Output("my-thermometer", "value"),
      [Input("thermometer-slider", "value")]) do value
      return value
    end

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

0
2
4
6
8
10
0 2 4 6 8 10

### Current value with units

Display the value of the thermometer along with optional units with `showCurrentValue` and `units`.

    using Dash
    using DashDaq

    app = dash()

    app.layout = daq_thermometer(
      min=95,
      max=105,
      value=100,
      showCurrentValue=true,
      units="C"
    )

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

95
97
99
101
103
105
100.0
C

### Height and width

Control the size of the thermometer by setting `height` and `width`.

    using Dash
    using DashDaq

    app = dash()

    app.layout = daq_thermometer(
      value=5,
      height=150,
      width=5
    )

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

0
2
4
6
8
10

### Label

Display a label alongside the thermometer in the specified position by setting `label` and `labelPosition`.

    using Dash
    using DashDaq

    app = dash()

    app.layout = daq_thermometer(
      value=5,
      label="Current temperature",
      labelPosition="top"
    )

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

Current temperature
0
2
4
6
8
10

### Custom scales

Control the intervals at which labels are displayed, as well as the labels themselves with the `scale` property.

    using Dash
    using DashDaq

    app = dash()

    app.layout = daq_thermometer(
      value=5,
      scale=Dict("start" => 2, "interval" => 3,
      "labelInterval" => 2, "custom" => Dict(
          "2" => "ideal temperature",
          "5" => "projected temperature"
      ))
    )

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

0
ideal temperature
projected temperature
6
10

## Thermometer 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 thermometer. If logarthmic, the value displayed will be the logarithm of the inputted value.

`height` (Real; default `192`): The height of the thermometer in pixels.

`width` (Real; default `20`): The width of the thermometer in pixels.

`color` (String; optional): The color of the thermometer fill/current value text.

`min` (Real; default `0`): The minimum value of the thermometer. If logarithmic, represents the minimum exponent.

`max` (Real; default `10`): The maximum value of the thermometer. If logarithmic, represents the maximum exponent.

`base` (Real; default `10`): Base to be used in logarithmic scale.

`logarithmic` (Bool; optional): If set to true, a logarithmic scale will be used.

`showCurrentValue` (Bool; optional): If true, the current value of the thermometer will be displayed.

`units` (String; optional): Label for the current value.

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