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

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

Styling

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

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>