Precision Input Examples and Reference


Default Precision Input

An example of a default precision input without any extra properties.

import dash
import dash_daq as daq
import dash_html_components as html

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

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div([
    daq.PrecisionInput(
        id='my-precision',
        label='Default',
        precision=4,
        value=1234
    ),
    html.Div(id='precision-output')
])


@app.callback(
    dash.dependencies.Output('precision-output', 'children'),
    [dash.dependencies.Input('my-precision', 'value')])
def update_output(value):
    return 'The current value is {}.'.format(value)


if __name__ == '__main__':
    app.run_server(debug=True)

Label

Set the label and label position with label and labelPosition.

import dash_daq as daq

daq.PrecisionInput(
    label='Label',
    labelPosition='top',
    precision=2,
    value=12
)  

Precision

The precision property is mandatory for this component. The precision property indicates the accuracy of the specified number.

import dash_daq as daq

daq.PrecisionInput(
    precision=2,
    value=125
)  

Max and Min

Set the maximum and minimum value of the numeric input with max and min.

import dash_daq as daq

daq.PrecisionInput(
    precision=2,
    value=15,
    max=20,
    min=10
)  

Size

Set the length (in pixels) of the numeric input size.

import dash_daq as daq

daq.PrecisionInput(
    size=120,
    precision=4,
    value=245
)  

Disabled

Disable the precision input by setting disabled=True.

import dash_daq as daq

daq.PrecisionInput(
    disabled=True,
    precision=4,
    value=9999
)  

Precision Input Properties

Access this documentation in your Python terminal with:
```python

help(dash_daq.PrecisionInput)
```

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

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

disabled (boolean; optional): If true, numeric input cannot be changed.

label (dict; optional): Description to be displayed alongside the scientific notation. To control styling, pass an object with label and style properties. label has the following type: string | dict containing keys ‘style’, ‘label’. Those keys have the following types:

  • style (dict; optional)
  • label (string; optional)

labelPosition (a value equal to: ‘top’, ‘bottom’; default 'top'): Where the numeric input label is positioned.

min (number; default 0): The minimum value of the numeric input

max (number; default Number.MAX_SAFE_INTEGER): The maximum value of the numeric input

precision (number; default 2): Number of significant figures

persistence (boolean | string | number; 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 (list of a value equal to: ‘value’s; 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’, ‘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.

size (number; optional): The size (length) of the numeric input in pixels

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

theme (dict; default light): Theme configuration to be set by a ThemeProvider

value (number; optional): The value of numeric input