Import
from reflex_ui import slider
Description
A slider component for selecting numeric values within a range, with support for single and range sliders.
Basic Usage
slider()
slider(value=State.volume, on_value_change=State.set_volume)
slider(min=0, max=100, step=1, default_value=50)
# Range slider
slider(value=[20, 80], on_value_change=State.set_range)
Props
value
Var[int | float | list[int | float]] | int | float | list[int | float]
The controlled value of the slider. For ranged sliders, provide an array with two values.
default_value
Var[int | float | list[int | float]] | int | float | list[int | float]
The uncontrolled value when initially rendered.
min
Var[float | int] | float | int
default:"0"
The minimum allowed value of the slider. Should not be equal to max.
max
Var[float | int] | float | int
default:"100"
The maximum allowed value of the slider. Should not be equal to min.
step
Var[float | int] | float | int
default:"1"
The granularity with which the slider can step through values (discrete slider).
large_step
Var[float | int] | float | int
default:"10"
The granularity when using Page Up/Page Down or Shift + Arrow keys.
min_steps_between_values
Var[float | int] | float | int
default:"0"
The minimum steps between values in a range slider.
disabled
Var[bool] | bool
default:"False"
Whether the slider is disabled.
orientation
Literal['horizontal', 'vertical'] | Var[...]
default:"horizontal"
The component orientation.
thumb_alignment
Literal['center', 'edge', 'edge-client-only'] | Var[...]
default:"center"
How the thumb(s) align relative to the slider’s control when at min or max.
thumb_collision_behavior
Literal['push', 'swap', 'none'] | Var[...]
default:"push"
Controls thumb behavior during pointer interactions in range sliders.
Identifies the field when a form is submitted.
Locale information for formatting.
Options to format the input value.
Event Handlers
on_value_change
EventType[()] | EventType[int] | EventType[float] | EventType[list[int | float]]
Callback function fired when the slider’s value changes.
on_value_committed
EventType[()] | EventType[int] | EventType[float] | EventType[list[int | float]]
Callback function fired when pointerup is triggered.
Subcomponents
slider.root
Groups all parts of the slider.
slider.root(
slider.control(
slider.track(
slider.indicator(),
slider.thumb()
)
),
value=State.value,
on_value_change=State.set_value,
**props
) -> SliderRoot
slider.value
Displays the current value of the slider as text.
slider.value(**props) -> SliderValue
slider.control
The clickable, interactive part of the slider.
slider.control(*children, **props) -> SliderControl
slider.track
Contains the slider indicator and represents the entire range.
slider.track(*children, **props) -> SliderTrack
slider.indicator
Visualizes the current value of the slider.
slider.indicator(**props) -> SliderIndicator
slider.thumb
The draggable part at the tip of the indicator.
slider.thumb(
get_aria_label="Volume",
index=0, # For range sliders
**props
) -> SliderThumb
Function returning a user-friendly name for the input associated with the thumb.
Function returning a user-friendly name for the current value.
Whether the thumb should ignore user interaction.
The zero-based index of the thumb in a range slider.
A ref to access the hidden input element.
Class Names Reference
slider.class_names.ROOT # Root container classes
slider.class_names.VALUE # Value display classes
slider.class_names.CONTROL # Control wrapper classes
slider.class_names.TRACK # Track classes
slider.class_names.INDICATOR # Indicator classes
slider.class_names.THUMB # Thumb classes
ROOT Class
"flex max-w-64 w-full touch-none items-center select-none"
VALUE Class
"text-sm text-primary-11 font-medium"
CONTROL Class
"flex items-center justify-center w-full"
TRACK Class
"h-2 w-full rounded-full bg-secondary-4 select-none"
INDICATOR Class
"absolute h-full rounded-full bg-primary-9 select-none"
THUMB Class
"h-4 w-[0.575rem] rounded-[2px] bg-white outline outline-black/30 select-none box-shadow:[0_0_0_1px_rgba(0,0,0,1),0_1px_2px_rgba(0,0,0,.04)] data-[dragging]:h-5 transition-[height,scale] hover:h-4.5"
Method Signature
@classmethod
def create(
cls,
*children,
value: Var[float | int | list[float | int]] | float | int | list[float | int] | None = None,
default_value: Var[float | int | list[float | int]] | float | int | list[float | int] | None = None,
min: Var[float | int] | float | int | None = None,
max: Var[float | int] | float | int | None = None,
step: Var[float | int] | float | int | None = None,
large_step: Var[float | int] | float | int | None = None,
disabled: Var[bool] | bool | None = None,
orientation: Literal["horizontal", "vertical"] | Var[...] | None = None,
on_value_change: EventType[()] | EventType[int] | EventType[float] | EventType[list[int | float]] | None = None,
on_value_committed: EventType[()] | EventType[int] | EventType[float] | EventType[list[int | float]] | None = None,
**props
) -> HighLevelSlider
Return Type
HighLevelSlider - Returns a complete slider component with control, track, indicator, and thumb.