Reflex Cloud - Fast, secure & scalable hosting. One command to deploy.

Slider

Provides user selection from a range of values. The

Basic Example

The slider can be controlled by a single value or a range of values. Slider can be hooked to state to control its value. Passing a list of two values creates a range slider.

50

Range Slider

Range slider is created by passing a list of two values to the default_value prop. The list should contain two values that are in the range of the slider.

25

75

Live Updating Slider

You can use the on_change prop to update the slider value as you interact with it. The on_change prop takes a function that will be called with the new value of the slider.

Here we use the throttle method to limit the rate at which the function is called, which is useful to prevent excessive updates. In this example, the slider value is updated every 100ms.

50

Slider in forms

Here we show how to use a slider in a form. We use the name prop to identify the slider in the form data. The form data is then passed to the handle_submit method to be processed.

Example Form

Results:

{}

API Reference

rx.slider

Provides user selection from a range of values.

PropType | ValuesDefaultInteractive
as_child
bool
size
"1" | "2" | ...
variant
"classic" | "surface" | ...
color_scheme
"tomato" | "red" | ...
high_contrast
bool
radius
"none" | "small" | ...
default_value
Union[List, float, int]
value
List
name
str
width
Union[str, NoneType]
Var.create("100%")
min
Union[float, int]
max
Union[float, int]
step
Union[float, int]
disabled
bool
orientation
"vertical" | "horizontal"

Event Triggers

See the full list of default event triggers
TriggerDescription
on_change Props to rename Fired when the value of the slider changes.
on_value_commit Fired when a thumb is released after being dragged.