Skip to content


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.


Name Type Default Description
display(★) dynamic(any)

The label to be displayed.
This can be formatted if it is a numerical value.

value dynamic(int,float) 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 vartical).

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 dynamic(str)

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 dynamic(str)

The information that is displayed when the user hovers over this element.

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


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.


Minimal usage

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

Page content

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

Formatting the message

A format can be applied to the message.

Page content

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

Vertical indicators

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

Page content

<taipy:indicator orientation="vertical" value="10">message</taipy:indicator>


Properties width and height can be specified depending of the orientation.

Page content


<taipy:indicator value="{val}" width="50vw">message</taipy:indicator>

<taipy:indicator value="{val}" orientation="vertical" height="50vh">message</taipy:indicator>