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
ExpandCollapse
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:
{}ExpandCollapse
API Reference
rx.slider
Provides user selection from a range of values.
sizevariantcolor_schemehigh_contrastradiusdisabledorientationProps
| Prop | Type | Description |
|---|---|---|
as_child | bool | Change the default rendered element for the one passed as a child, merging their props and behavior. |
size | "1""2""3" | Button size "1" - "3". |
variant | "classic""surface""soft" | Variant of button. |
color_scheme | "tomato""red""ruby""crimson""pink""plum""purple""violet""iris""indigo""blue""cyan""teal""jade""green""grass""brown""orange""sky""mint""lime""yellow""amber""gold""bronze""gray" | Override theme color for button. |
high_contrast | bool | Whether to render the button with higher contrast color against background. |
radius | "none""small""full" | Override theme radius for button: "none" | "small" | "full". |
default_value | Union[Sequence, float, int] | The value of the slider when initially rendered. Use when you do not need to control the state of the slider. |
value | Sequence | The controlled value of the slider. Must be used in conjunction with onValueChange. |
name | str | The name of the slider. Submitted with its owning form as part of a name/value pair. |
width | Union[str, NoneType] | The width of the slider. |
min | Union[float, int] | The minimum value of the slider. |
max | Union[float, int] | The maximum value of the slider. |
step | Union[float, int] | The step value of the slider. |
disabled | bool | Whether the slider is disabled. |
orientation | "vertical""horizontal" | The orientation of the slider. |