Range slider
Let people choose an approximate numeric value within a range using a range slider.
Examples
Breakpoints
Mobile
320pxMobile Lg
480pxTablet
640pxDesktop
1024pxrange-slider-demo.tsx
Component API
Use a Root and Input for a styled native range control.
Root<div>
Provides disabled state. For validation state, wrap the slider in Field.Root with invalid.
| Prop | Type | Description |
|---|---|---|
disabled | boolean | Disables the slider. |
name | string | Form field name. |
| Attribute | Value | Purpose |
|---|---|---|
data-disabled | Present when disabled | Style the disabled state. |
Input<input>
Native range input; set min, max, step, and value here.
| Attribute | Value | Purpose |
|---|---|---|
data-disabled | Present when disabled | Style the disabled state. |
data-invalid | Present when invalid | Style the error state. |