Skip to content

slider

Displays and allows the user to set a value within a range.

The range is set by the values min and max which must be integer values.

If the lov property is used, then the slider can be used to select a value among the different choices.

Properties

Name Type Default Description
value(★) dynamic(int | float | str)

The value that is set for this slider. It would be a lov label if it is used.

min int | float 0

The minimum value. This is ignored when lov is defined.

max int | float 100

The maximum value. This is ignored when lov is defined.

text_anchor str "bottom"

When the lov property is used, this property indicates the location of the label. Possible values are:

  • "bottom"
  • "top"
  • "left"
  • "right"
  • "none" (no label is displayed)

labels bool|dict

The labels for specific points of the slider. If set to True, this slider uses the labels of the lov if there are any. If set to a dictionary, the slider uses the dictionary keys as a lov key or index, and the associated value as the label.

continuous bool True

If set to False, the control emits an on_change notification only when the mouse button is released, otherwise notifications are emitted during the cursor movements. If lov is defined, the default value is False.

change_delay int App config

Minimum time between triggering two on_change calls. The default value is defined at the application configuration level by the change_delay configuration option. if None or 0, there's no delay.

width str "300px"

The width, in CSS units, of this element.

height str

The height, in CSS units, of this element. It defaults to the width value when using the vertical orientation.

orientation str "horizontal"

The orientation of this slider. Valid values are "horizontal" or "vertical".

lov dict[str, any]

The list of values. See the section on List of Values for details.

adapter Function `lambda x: str(x)`

The function that transforms an element of lov into a tuple(id:str, label:str|Icon).

type str Type of first lov element

Must be specified if lov contains a non-specific type of data (ex: dict). value must be of that type, lov must be an iterable on this type, and the adapter function will receive an object of this type.

value_by_id bool False

If False, the selection value (in value) is the selected element in lov. If set to True, then value is set to the id of the selected element in lov.

on_change Callback

The name of a function that is triggered when the value is updated.
The parameters of that function are all optional:

  • state (State): the state instance.
  • var_name (str): the variable name.
  • value (any): the new value.

propagate bool App config

Allows the control's main value to be automatically propagated.
The default value is defined at the application configuration level. If True, any change to the control's value is immediately reflected in the bound application variable.

active dynamic(bool) True

Indicates if this component is active. An inactive component allows no user interaction.

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

List of CSS class names that will be associated with the generated HTML Element. This class names will be added to the default taipy-<element_type>.

hover_text dynamic(str)

Information that is displayed when the user hovers over this element.

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

Usage

Selecting a value between 0 and 100

A numeric value can easily be represented and interacted with using the following content:

Page content

<|{value}|slider|>
<taipy:slider>{value}</taipy:slider>

Constraining values

You can specify what bounds the value should be restrained to:

Page content

<|{value}|slider|min=1|max=10|>
<taipy:slider min="1" max="10">{value}</taipy:slider>

Changing orientation

Page content

<|{value}|slider|orientation=vert|>
<taipy:slider orientation="vertical">{value}</taipy:slider>