Skip to main content
Sliders let users select a numeric value from a range by dragging a handle.

​
Basic Usage

​
With Step Increment

​
Different Ranges

​
Displaying the Value

Give the slider a name to store its value in state, then reference it with {{ }} interpolation in other components. Add a format specifier to control how the value displays: The slider, label, and progress bar all stay in sync — drag the slider and the displayed value and progress bar update instantly. This pattern works with any component that supports interpolation.

​
Disabled State

​
API Reference

Slider Parameters

​
min
float
default:"0"
Minimum value of the range.
​
max
float
default:"100"
Maximum value of the range.
​
value
float | None
default:"None"
Initial value.
​
step
float | None
default:"None"
Step increment for the slider. If not provided, slider moves continuously.
​
name
str | None
default:"None"
Form field name for submission.
​
disabled
bool
default:"False"
Whether the slider is non-interactive.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes appended to the component’s built-in styles.

​
Protocol Reference

Slider
{
  "type": "Slider",
  "min?": 0,
  "max?": 100,
  "value?": "number",
  "step?": "number",
  "name?": "string",
  "disabled?": false,
  "onChange?": "Action | Action[]",
  "cssClass?": "string"
}
For the complete protocol schema, see Slider.