Components
Range
A native range input with customizable track, fill, thumb, and value label.
Props
Native attributes and event handlers are forwarded to the underlying input element
unless handled by the component.
RangeData contains numeric max, min, percent, step, and value fields. Custom track,
fill, thumb, and label snippets receive this object. Class styles the wrapper; native input attributes
are forwarded to the range input.
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | Accepted for API consistency; not rendered by this component. |
class | string | '' | Tailwind classes merged with the theme and variants. |
element | HTMLInputElement | null | null | Bindable reference to the underlying DOM element. |
fill | Snippet<[RangeData]> | undefined | Custom fill snippet receiving RangeData. |
inTransition | TransitionProps | undefined | Overrides the opening transition. |
isLabelVisible | boolean | true | Shows the range value label. |
isVisible | boolean | true | Bindable visibility state. |
label | Snippet<[RangeData]> | undefined | Custom value-label snippet receiving RangeData. |
max | number | 100 | Maximum range value. |
min | number | 0 | Minimum range value. |
outTransition | TransitionProps | undefined | Overrides the closing transition. |
step | number | 1 | Increment between valid range values. |
theme | Theme | global theme | Optional local theme override. |
thumb | Snippet<[RangeData]> | undefined | Custom thumb snippet receiving RangeData. |
track | Snippet<[RangeData]> | undefined | Custom track snippet receiving RangeData. |
transition | TransitionProps | [noopTransition, {}] | A Svelte transition function and its options. |
value | number | 0 | Bindable current value of the control. |
variants | string[] | [] | Local variant names or theme references such as button.base. |
Default usage
Import Range from sveltewind/components. This example shows its default styling in a usable context.
Loading...Examples
Theme variants
Every variant available for Range in the built-in themes is shown below.
compact — Apply the compact variant.
Loading...comfortable — Apply the comfortable variant.
Loading...full — Apply the full variant.
Loading...secondary — Apply the secondary variant.
Loading...Class overrides
Apply rounded-xl border border-primary-500/40 p-4 locally.
Loading...Props and behavior
Change step, isLabelVisible while retaining the default component styling.
Loading...Content and values
Provide different text, child content, or definitions inside the required parent context.
Loading...Bind the value
Set bounds and a step, then bind the numeric value.
Volume: 40
Loading...