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`^(★)	`Union[int,float,str,list[int],list[float],list[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`	`Union[int,float]`	0	The minimum value. This is ignored when lov is defined.
`max`	`Union[int,float]`	100	The maximum value. This is ignored when lov is defined.
`step`	`Union[int,float]`	1	The step value, which is the gap between two consecutive values the slider set. It is a good practice to have (max-min) being divisible by step. This property 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`	`Union[bool,dict[str,str]]`		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` callbacks. 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 of this slider, in CSS units.
`height`	`str`		The height of this slider, in CSS units. It defaults to the value of width 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 more details.
`adapter`	`Union[str, Callable]`	`lambda x: str(x)`	A function or the name of the function that transforms an element of lov into a tuple(id:str, label:Union[str,Icon]). The default value is a function that returns the string representation of the lov element.
`type`	`str`	Type name of the first lov element	This property is required if lov contains a non-specific type of data (e.g., a dictionary). Then: value must be of that type lov must be an iterable containing elements of this type The function set to adapter will receive an object of this type. The default value is the type of the first element in lov.
`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`	`Union[str, Callable]`		A function or the name of a function that is triggered when the value is updated. This function is invoked with the following parameters: 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 by the propagate configuration option. 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 is 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 are associated with the generated HTML Element. These class names are added to the default `taipy-slider` class name.
`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.

Usage¶

Selecting a value in a range¶

See the entire code for this example

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

Definition

MarkdownHTMLPython

<|{value}|slider|>

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

import taipy.gui.builder as tgb
...
tgb.slider("{value}")

The page contains a slider that looks like this:

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¶

See the entire code for this example

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

Definition

MarkdownHTMLPython

<|{value}|slider|min=1|max=10|>

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

import taipy.gui.builder as tgb
...
tgb.slider("{value}", min="1", max="10")

The resulting slider looks like this:

Changing orientation¶

See the entire code for this example

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

Definition

MarkdownHTMLPython

<|{value}|slider|orientation=vert|>

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

import taipy.gui.builder as tgb
...
tgb.slider("{value}", orientation="vert")

And now the slider is displayed vertically:

Select among a list of values¶

See the entire code for this example

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:

Definition

MarkdownHTMLPython

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

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

import taipy.gui.builder as tgb
...
tgb.slider("{value}", lov="XXS;XS;S;M;L;XL;XXL")

Then only those values are accessible by the user:

Multi selection¶

See the entire code for this example

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:

Definition

MarkdownHTMLPython

<|{values}|slider|>

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

import taipy.gui.builder as tgb
...
tgb.slider("{values}")

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

Date range selection¶

See the entire code for this example

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:

Definition

MarkdownHTMLPython

<|{dates}|slider|lov={all_dates_str}|>

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

import taipy.gui.builder as tgb
...
tgb.slider("{dates}", lov="{all_dates_str}")

And this is what this date range picker looks like:

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.