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(★) int|float|int[]|float[]|str|str[]
dynamic

The value that is set for this slider.
If this slider is based on a lov then this property can be set to the lov element.
This value can also hold an array of numbers to indicate that the slider reflects a range (within the [min,max] domain) defined by several knobs that the user can set independently.
If this slider is based on a lov then this property can be set to an array of lov elements. The slider is then represented with several knobs, one for each lov value.

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

(★)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 in a range

You can download the entire source code used in this section from the GitHub repository.

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

Page content

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

The page contains a slider that looks like this:

A simple slider

The user can pick the slider knob and move it around to select a value within the default range [0, 100].

Setting the slider range

You can download the entire source code used in this section from the GitHub repository.

You can specify, in the min and max properties, what bounds the selected value should be constrained to:

Page content

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

The resulting slider looks like this:

Custom range

Changing orientation

You can download the entire source code used in this section from the GitHub repository.

A slider can also be vertical if the orientation property is set to a string beginning with the letter "v".

Page content

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

And now the slider is displayed vertically:

Changing the default orientation

Select among a list of values

You can download the entire source code used in this section from the GitHub repository.

A slider can also allow users to select a value from a list of predefined values.
To do this, you must set the lov property to a list of values:

Page content

<|{value}|slider|lov=XXS;XS;S;M;L;XL;XXL|>
<taipy:slider lov="XXS;XS;S;M;L;XL;XXL">{value}</taipy:slider>

Then only those values are accessible by the user:

List of values

Multi selection

You can download the entire source code used in this section from the GitHub repository.

You can use a slider control to display multiple values and let users select each.
To achieve that, the value property must be initially set to an array containing the initial values to reflect. The slider will have one knob for each value.
When the user moves any of the knobs, the on_change callback is invoked with the variable value set to an array containing the new selection.

Let's create an initial value for our slider:

values = [20, 40, 80]

And use this variable as the value property value:

Page content

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

Because the initial value is an array with three values, the slider is displayed with three knobs that the user can move:

Multiple values

Date range selection

You can download the entire source code used in this section from the GitHub repository.

You can create a slider to select a date range, combining the use of the lov property with a multi-knob slider.
Note that this can work only if your base date range (the one the user can pick from) is small enough or it could be tricky for users to select a specific date.

Here is an example that lets you select a date range taken from an entire year.

You need to initialize an array of date strings that will be shown to the user as knobs are moved along the slider:

# Create the list of dates (all year 2000)
all_dates = {}
all_dates_str = []
start_date = date(2000, 1, 1)
end_date = date(2001, 1, 1)
a_date = start_date
while a_date < end_date:
    date_str = a_date.strftime("%Y/%m/%d")
    all_dates_str.append(date_str)
    all_dates[date_str] = a_date
    a_date += timedelta(days=1)

# Initial selection: first and last day
dates=[all_dates_str[1], all_dates_str[-1]]
# These two variables are used in text controls
start_sel = all_dates[dates[0]]
end_sel = all_dates[dates[1]]

Now, all_dates_str contains the list of all dates the user can choose from. We will use that array as the value of the value property.
dates holds the initial date range selection.

start_sel and end_sel are string values that can be used in text controls as a visual feedback.
We need to update these variables when the user picks new dates:

def on_change(state, _, var_value):
    # Update the text controls
    state.start_sel = all_dates[var_value[0]]
    state.end_sel = all_dates[var_value[1]]

This callback will receive, in var_value, the array of the two selected dates. We can simply update start_sel and end_sel accordingly.

The slider control definition is the following:

Page content

<|{dates}|slider|lov={all_dates_str}|>
<taipy:slider lov="{all_dates_str}">{dates}</taipy:slider>

And this is what this date range picker looks like:

Date range selection