Skip to main content
Sliders let users select a numeric value from a range by dragging a handle. The default range is 0–100.

​
Basic Usage

​
Displaying the Value

Every form control has an .rx property — a reactive reference to its current value. For a slider, .rx is a number you can format with pipes like .percent() or use in expressions: When the display needs to appear above the slider in the layout, forward-declare the reference with Rx(lambda: ...) so it resolves at render time: See Forward References for more on this pattern.

​
Range and Step

Use min, max, and step to constrain the slider. Here the range is 0–5 with half-step increments:

​
With Actions

The on_change parameter runs actions when the slider value changes. $event is the current numeric value:
For simply displaying the slider’s current value, .rx binding is usually easier. Use on_change when you need to run custom logic like triggering a tool call or updating multiple state keys.

​
Disabled State

​
Variants

Semantic variants color the filled track to communicate meaning at a glance — the same palette available on Progress:

​
Sizes

Control the track thickness with size. The default is a medium weight; use sm for compact layouts and lg for prominent controls:

​
Custom Colors

Use indicator_class for arbitrary track colors beyond the built-in variants:

​
Vertical Orientation

Set orientation="vertical" for vertical sliders. They fill their container’s height, so wrap them in a fixed-height parent:

​
Handle Styles

The handle_style parameter changes the thumb shape. Use "bar" for a tall rounded rectangle instead of the default circle:

​
API Reference

Slider Parameters

​
float | None
default:"None"
Initial value of the slider.
​
str | None
default:"None"
State key for the slider’s current value. Set this to bind the slider to state for display or form submission.
​
float
default:"0"
Minimum value of the range.
​
float
default:"100"
Maximum value of the range.
​
float | None
default:"None"
Step increment. If not provided, the slider moves continuously.
​
bool
default:"False"
Whether the slider is non-interactive.
​
str
default:"default"
Visual variant for the filled track: "default", "success", "warning", "destructive", "info", "muted".
​
str
default:"default"
Track thickness: "sm" (4px), "default" (6px), "lg" (10px).
​
str | None
default:"None"
Tailwind classes for the filled track. Overrides variant coloring.
​
str
default:"horizontal"
Layout direction: "horizontal" or "vertical". Vertical sliders fill their container’s height.
​
str
default:"circle"
Thumb shape: "circle" (default round) or "bar" (tall rounded rectangle).
​
Action | list[Action] | None
default:"None"
Action(s) to execute when the value changes. $event is the current numeric value.
​
str | None
default:"None"
Additional Tailwind CSS classes appended to the component’s built-in styles.

​
Protocol Reference

Slider
For the complete protocol schema, see Slider.