Skip to main content
The Slider component provides an accessible range slider for selecting numeric values within a defined range.

​
Basic Usage

import reflex_ui as ui

ui.slider()

​
Controlled Value

class State(rx.State):
    volume: int = 50

ui.slider(
    value=State.volume,
    on_value_change=State.set_volume,
    min=0,
    max=100
)

​
Event Handlers

ui.slider(
    value=State.seed,
    on_value_change=State.set_seed,
    on_value_committed=lambda value: rx.toast.success(f"Final value: {value}")
)
​
on_value_change
EventHandler[int | float | list]
Event fired continuously while dragging
​
on_value_committed
EventHandler[int | float | list]
Event fired when dragging ends (on pointer up)

​
Range Configuration

​
min
int | float
default:"0"
Minimum allowed value
​
max
int | float
default:"100"
Maximum allowed value
​
step
int | float
default:"1"
Granularity of value changes
​
large_step
int | float
default:"10"
Step size for Page Up/Down and Shift+Arrow keys

​
Value Props

​
value
int | float | list[int | float]
Current slider value (controlled). Use array for range sliders.
​
default_value
int | float | list[int | float]
Initial value (uncontrolled)

​
Range Slider

Use array values for range selection: 
ui.slider(
    value=[20, 80],
    on_value_change=handle_range,
    min=0,
    max=100
)
​
min_steps_between_values
int | float
default:"0"
Minimum distance between thumbs in range slider

​
Orientation

​
orientation
Literal['horizontal', 'vertical']
default:"horizontal"
Layout direction of the slider
ui.slider(
    orientation="vertical",
    value=State.volume,
    class_name="h-48"
)

​
Disabled State

ui.slider(
    disabled=True,
    value=50
)
​
disabled
bool
default:"False"
Disables slider interaction

​
Real Example

From demo at demo/demo.py:34: 
ui.slider(
    value=State.seed,
    on_value_change=State.set_seed,
    on_value_committed=lambda value: rx.toast.success(f"Value: {value}"),
    class_name="max-w-xs"
)

​
Compositional API

For advanced layouts: 
ui.slider.root(
    ui.slider.value(),  # Display current value
    ui.slider.control(
        ui.slider.track(
            ui.slider.indicator(),
            ui.slider.thumb()
        )
    ),
    value=State.value,
    on_value_change=State.set_value
)

​
Slider Components

​
slider.root

Container for all slider parts. 
ui.slider.root(
    # child components
    value=50
)

​
slider.value

Displays the current numeric value. 
ui.slider.value()  # Shows formatted value

​
slider.control

Clickable interactive area. 
ui.slider.control(
    ui.slider.track()
)

​
slider.track

Background track element. 
ui.slider.track(
    ui.slider.indicator(),
    ui.slider.thumb()
)

​
slider.indicator

Visual indicator showing filled portion. 
ui.slider.indicator()  # Auto-sized based on value

​
slider.thumb

Draggable thumb element. 
ui.slider.thumb()  # One per value in range slider

​
Styling Classes

Access predefined styles via ui.slider.class_names:
  • ROOT: Container flex layout
  • VALUE: Value text display
  • CONTROL: Interactive control area
  • TRACK: Background track
  • INDICATOR: Filled indicator
  • THUMB: Draggable thumb with shadow

​
Thumb Behavior

​
thumb_alignment
Literal['center', 'edge', 'edge-client-only']
default:"center"
How thumbs align at min/max positions
​
thumb_collision_behavior
Literal['push', 'swap', 'none']
default:"push"
How thumbs interact when they collide in range sliders

​
Form Integration

​
name
str
Form field name for submission
rx.form(
    ui.slider(
        name="volume",
        default_value=50
    ),
    on_submit=handle_submit
)

​
Keyboard Controls

  • Arrow Left/Down: Decrease by step
  • Arrow Right/Up: Increase by step
  • Page Down: Decrease by large_step
  • Page Up: Increase by large_step
  • Home: Jump to min
  • End: Jump to max

​
Implementation Details

From source code at reflex_ui/components/base/slider.py:206:
  • Built on Base UI Slider primitives
  • High-level wrapper auto-creates complete structure
  • Supports single and range values
  • Thumb scales up slightly when dragging
  • Width capped at 16rem (256px) by default

Build docs developers (and LLMs) love

Get started for freeTalk to us