`indicator`

Displays a label on a red to green scale at a specific position.

The min value can be greater than the max value.
The value will be maintained between min and max.

Properties¶

Name	Type	Default	Description
`display`^(★)	`any` dynamic		The label to be displayed. This can be formatted if it is a numerical value.
`value`	`int,float` dynamic	min	The location of the label on the [min, max] range.
`min`	`int\|float`	0	The minimum value of the range.
`max`	`int\|float`	100	The maximum value of the range.
`format`	`str`		The format to use when displaying the value. This uses the `printf` syntax.
`orientation`	`str`	"horizontal"	The orientation of this slider.
`width`	`str`	None	The width, in CSS units, of the indicator (used when orientation is horizontal).
`height`	`str`	None	The height, in CSS units, of the indicator (used when orientation is vertical).
`id`	`str`		The identifier that will be assigned to the rendered HTML component.
`properties`	`dict[str, any]`		Bound to a dictionary that contains additional properties for this element.
`class_name`	`str` dynamic		The list of CSS class names that will be associated with the generated HTML Element. These class names will be added to the default `taipy-<element_type>`.
`hover_text`	`str` dynamic		The information that is displayed when the user hovers over this element.

^(★)display is the default property for this visual element.

Styling¶

All the indicator controls are generated with the "taipy-indicator" CSS class. You can use this class name to select the indicator controls on your page and apply style.

Usage¶

Minimal usage¶

Shows a message at a specified position between min and max.

Definition

MarkdownHTMLPython

<|Value|indicator|value={val}|min=0|max=100|>

<taipy:indicator value="{val}" min="0" max="100">Value</taipy:indicator>

import taipy.gui.builder as tgb
...
tgb.indicator("Value", value="{val}", min="0", max="100")

Formatting the message¶

The format property can be set to the format of the value to be displayed.

A format can be applied to the message.

Definition

MarkdownHTMLPython

<|50|indicator|format=%.2f|value=10|>

<taipy:indicator format="%.2f" value="10">50</taipy:indicator>

import taipy.gui.builder as tgb
...
tgb.indicator("50", format="%.2f", value="10")

Vertical indicators¶

The orientation property can be specified to "vertical" (or "v") to create a vertical indicator.

Definition

MarkdownHTMLPython

<|Value|indicator|orientation=v|value=10|>

<taipy:indicator orientation="v" value="10">Value</taipy:indicator>

import taipy.gui.builder as tgb
...
tgb.indicator("Value", orientation="v", value="10")

Dimensions¶

The properties width and height can be specified, depending on the value of orientation.

Definition

MarkdownHTMLPython

<|Value 1|indicator|value={val1}|width=50vw|>

<|Value 2|indicator|value={val2}|orientation=vertical|height=50vh|>

<taipy:indicator value="{val1}" width="50vw">Value 1</taipy:indicator>

<taipy:indicator value="{val2}" orientation="vertical" height="50vh">Value 2</taipy:indicator>

import taipy.gui.builder as tgb
...
tgb.indicator("{Value 1}", value="{val1}", width="50vw")
tgb.indicator("{Value 2}", value="{val2}", orientation="vertical", width="50vw")