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 |
---|---|---|---|
(★) |
dynamic(int|float|str) | The value that is set for this slider. |
|
min |
int|float | 0 | The minimum value. |
max |
int|float | 100 | The maximum value. |
text_anchor |
str | "bottom" | When the lov property is used, this property indicates the location of the label.
|
labels |
bool|dict | The labels for specific points of the slider. |
|
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. |
change_delay |
int | App config | Minimum time between triggering two on_change calls. |
width |
str | "300px" | The width, in CSS units, of this element. |
height |
str | The height, in CSS units, of this element. |
|
orientation |
str | "horizontal" | The orientation of this slider. |
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_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. |
(★)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>