Range

A range slider component for choosing a min-max interval with validation.

vu-range · @velkin/react/range

Copy page

Import

React

npm i @velkin/react

import { VuRange } from "@velkin/react/range";

Examples

API

Props

Prop	Type	Default	Description
name	`string`	—	Form field name for submit (`name` attr).
defaultvalue	`string`	—	Restored on `<form reset>` as `"from,to"` (`defaultvalue` attr).
formid	`string`	—	External `<form>` id (`formid` attr).
disabled	`boolean`	—	Non-interactive; blocks thumb dragging (`disabled` attr).
readonly	`boolean`	—	Focusable but cannot change the range (`readonly` attr).
required	`boolean`	—	Blocks valid submit when invalid (`required` attr).
requiredmessage	`string`	—	Custom `valueMissing` message (`requiredmessage` attr).
label	`string`	""	Plain-text label; slotted `label` wins when assigned.
hint	`string`	""	Helper text; `hint` slot wins when assigned.
id	`string`	""	Host id for label `for` / `aria-*` wiring.
variant	VuRangeVariant	"default"	Field chrome recipe. Default: `"default"`.
tone	VuRangeTone	"normal"	Neutral surface weight. Default: `"normal"`.
size	VuRangeSize	"md"	Track scale. Default: `"md"`.
radius	VuRangeRadius	"md"	Corner preset (`none`/`sm`/`md`/`lg`/`full`). Default: `md`.
block	`boolean`	false	Stretches the control to the container width. Default: `false`.
compact	`boolean`	false	Tighter label/hint/error spacing. Default: `false`.
from	`number`	20	Lower bound of the selected range. Default: `20`.
to	`number`	80	Upper bound of the selected range. Default: `80`.
min	`number`	0	Minimum selectable value. Default: `0`.
max	`number`	100	Maximum selectable value. Default: `100`.
step	`number`	10	Step interval for snapping. Default: `10`.
prefix	`string`	""	Text before each formatted endpoint.
suffix	`string`	""	Text after each formatted endpoint.
showvalue	`boolean`	—	Shows the formatted value summary. Default: `true`.
commitonly	`boolean`	—	Emits `vu-change` on thumb commit only. Default: `false`.
showerrors	`boolean`	—	Shows validation after activation (`showerrors` attr). Default: `false`.
validationactive	`boolean`	—	Drives invalid styling after activation (`validationactive` attr). Default: `false`.
invalid	`boolean`	false	True when last validation found errors (`invalid` attr). Default: `false`.
arialabel	`string`	—	Names the track when no visible label is present.
showValue	`boolean`	true	Shows the formatted value summary.
commitOnly	`boolean`	false	Emits `vu-change` on thumb commit only.
ariaLabel	`string`	""	Names the track when no visible label is present.
showErrors	`boolean`	false	Shows validation after activation.
validationActive	`boolean`	false	Drives invalid styling after activation.

Events

Event	Detail	Description
vu-change	VuRangeChangeDetail	Committed or live range update.
vu-invalid	VuRangeInvalidDetail	When validation messages are recomputed.
vu-clear	VuRangeClearDetail	After `reset()` syncs from `defaultValue`.

Slots

Slot	Description
label	Rich label markup; takes precedence over string `label` when assigned.
hint	Optional helper copy (HTML); overrides string `hint` when assigned.
error	Replaces default validation message list when assigned.

CSS parts

Part	Description
field	Column stacking label, header, track, hint, and error.
label	Label element above the control.
header	Row with label and value summary.
control	Interactive track row (`.range-track`) with variant chrome.
value	Formatted `from`–`to` summary.
affix	Prefix or suffix text in the value summary.
highlight	Selected range segment.
thumb-from	Lower native `<input type="range">`.
thumb-to	Upper native `<input type="range">`.
hint	Neutral helper text under the track.
error-message	Region for `slot="error"` or stacked default validation lines.
error-line	One default validation string when `slot="error"` is empty.
text	String `label` text when the `label` slot is empty.

Methods

Method	Description
setRange	- Sets and normalizes the selected range; emits `vu-change`.
reset	- Restores `defaultValue` and dispatches `vu-clear`.
validateInput	- Runs validators and syncs validity.

Types

Name	Definition
VuRangeChangeDetail	`{ from: number; to: number; }`
VuRangeClearDetail	`{ from: number; to: number; }`
VuRangeInvalidDetail	`{ errors: string[]; }`
VuRangeRadius	`"sm" \| "md" \| "lg" \| "none" \| "full"`
VuRangeSize	`"sm" \| "md" \| "lg"`
VuRangeTone	`"subtle" \| "normal" \| "strong"`
VuRangeVariant	`"outline" \| "default" \| "underline"`

Import

React

API

Props

Prop	Type	Default	Description
name	`string`	—	Form field name for submit (`name` attr).
defaultvalue	`string`	—	Restored on `<form reset>` as `"from,to"` (`defaultvalue` attr).
formid	`string`	—	External `<form>` id (`formid` attr).
disabled	`boolean`	—	Non-interactive; blocks thumb dragging (`disabled` attr).
readonly	`boolean`	—	Focusable but cannot change the range (`readonly` attr).
required	`boolean`	—	Blocks valid submit when invalid (`required` attr).
requiredmessage	`string`	—	Custom `valueMissing` message (`requiredmessage` attr).
label	`string`	""	Plain-text label; slotted `label` wins when assigned.
hint	`string`	""	Helper text; `hint` slot wins when assigned.
id	`string`	""	Host id for label `for` / `aria-*` wiring.
variant	VuRangeVariant	"default"	Field chrome recipe. Default: `"default"`.
tone	VuRangeTone	"normal"	Neutral surface weight. Default: `"normal"`.
size	VuRangeSize	"md"	Track scale. Default: `"md"`.
radius	VuRangeRadius	"md"	Corner preset (`none`/`sm`/`md`/`lg`/`full`). Default: `md`.
block	`boolean`	false	Stretches the control to the container width. Default: `false`.
compact	`boolean`	false	Tighter label/hint/error spacing. Default: `false`.
from	`number`	20	Lower bound of the selected range. Default: `20`.
to	`number`	80	Upper bound of the selected range. Default: `80`.
min	`number`	0	Minimum selectable value. Default: `0`.
max	`number`	100	Maximum selectable value. Default: `100`.
step	`number`	10	Step interval for snapping. Default: `10`.
prefix	`string`	""	Text before each formatted endpoint.
suffix	`string`	""	Text after each formatted endpoint.
showvalue	`boolean`	—	Shows the formatted value summary. Default: `true`.
commitonly	`boolean`	—	Emits `vu-change` on thumb commit only. Default: `false`.
showerrors	`boolean`	—	Shows validation after activation (`showerrors` attr). Default: `false`.
validationactive	`boolean`	—	Drives invalid styling after activation (`validationactive` attr). Default: `false`.
invalid	`boolean`	false	True when last validation found errors (`invalid` attr). Default: `false`.
arialabel	`string`	—	Names the track when no visible label is present.
showValue	`boolean`	true	Shows the formatted value summary.
commitOnly	`boolean`	false	Emits `vu-change` on thumb commit only.
ariaLabel	`string`	""	Names the track when no visible label is present.
showErrors	`boolean`	false	Shows validation after activation.
validationActive	`boolean`	false	Drives invalid styling after activation.

Events

Event	Detail	Description
vu-change	VuRangeChangeDetail	Committed or live range update.
vu-invalid	VuRangeInvalidDetail	When validation messages are recomputed.
vu-clear	VuRangeClearDetail	After `reset()` syncs from `defaultValue`.

Slots

Slot	Description
label	Rich label markup; takes precedence over string `label` when assigned.
hint	Optional helper copy (HTML); overrides string `hint` when assigned.
error	Replaces default validation message list when assigned.

CSS parts

Part	Description
field	Column stacking label, header, track, hint, and error.
label	Label element above the control.
header	Row with label and value summary.
control	Interactive track row (`.range-track`) with variant chrome.
value	Formatted `from`–`to` summary.
affix	Prefix or suffix text in the value summary.
highlight	Selected range segment.
thumb-from	Lower native `<input type="range">`.
thumb-to	Upper native `<input type="range">`.
hint	Neutral helper text under the track.
error-message	Region for `slot="error"` or stacked default validation lines.
error-line	One default validation string when `slot="error"` is empty.
text	String `label` text when the `label` slot is empty.

Methods

Method	Description
setRange	- Sets and normalizes the selected range; emits `vu-change`.
reset	- Restores `defaultValue` and dispatches `vu-clear`.
validateInput	- Runs validators and syncs validity.

Types

Name	Definition
VuRangeChangeDetail	`{ from: number; to: number; }`
VuRangeClearDetail	`{ from: number; to: number; }`
VuRangeInvalidDetail	`{ errors: string[]; }`
VuRangeRadius	`"sm" \| "md" \| "lg" \| "none" \| "full"`
VuRangeSize	`"sm" \| "md" \| "lg"`
VuRangeTone	`"subtle" \| "normal" \| "strong"`
VuRangeVariant	`"outline" \| "default" \| "underline"`

Import

Examples

API

Props

Events

Slots

CSS parts

Methods

Types

Related

Inputs

Guides

Browse

Import

Examples

API

Props

Events

Slots

CSS parts

Methods

Types

Related

Inputs

Guides

Browse