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

​
value
float | None
default:"None"
Initial value of the slider.
​
name
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.
​
min
float
default:"0"
Minimum value of the range.
​
max
float
default:"100"
Maximum value of the range.
​
step
float | None
default:"None"
Step increment. If not provided, the slider moves continuously.
​
disabled
bool
default:"False"
Whether the slider is non-interactive.
​
variant
str
default:"default"
Visual variant for the filled track: "default", "success", "warning", "destructive", "info", "muted".
​
size
str
default:"default"
Track thickness: "sm" (4px), "default" (6px), "lg" (10px).
​
indicator_class
str | None
default:"None"
Tailwind classes for the filled track. Overrides variant coloring.
​
orientation
str
default:"horizontal"
Layout direction: "horizontal" or "vertical". Vertical sliders fill their container’s height.
​
handle_style
str
default:"circle"
Thumb shape: "circle" (default round) or "bar" (tall rounded rectangle).
​
on_change
Action | list[Action] | None
default:"None"
Action(s) to execute when the value changes. $event is the current numeric value.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes appended to the component’s built-in styles.

​
Protocol Reference

Slider
{
  "type": "Slider",
  "name?": "string",
  "min?": 0,
  "max?": 100,
  "value?": "number | Action[] | string",
  "step?": "number",
  "range?": false,
  "disabled?": false,
  "variant?": "default | success | warning | destructive | info | muted",
  "size?": "sm | default | lg",
  "indicatorClass?": "string",
  "orientation?": "horizontal | vertical",
  "handleStyle?": "circle | bar",
  "onChange?": "Action | Action[]",
  "cssClass?": "string"
}
For the complete protocol schema, see Slider.