Slider

A slider component for choosing a numeric value with label and validation.

vu-slider · @velkin/react/slider

Copy page

Import

React

npm i @velkin/react

import { VuSlider } from "@velkin/react/slider";

Examples

API

Props

Prop	Type	Default	Description
name	`string`	—	Form field name for submit (`name` attr).
defaultvalue	`string`	—	Restored on `<form reset>` (`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 value (`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	VuSliderVariant	"default"	Field chrome recipe. Default: `"default"`.
tone	VuSliderTone	"normal"	Neutral surface weight. Default: `"normal"`.
size	VuSliderSize	"md"	Track scale. Default: `"md"`.
radius	VuSliderRadius	"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`.
min	`number`	0	Minimum selectable value. Default: `0`.
max	`number`	100	Maximum selectable value. Default: `100`.
step	`number`	1	Step interval for snapping. Default: `1`.
value	`number`	50	Snapped slider value. Default: `50`.
displayvalue	`number`	—	Live visual value while dragging when `commitonly`.
prefix	`string`	""	Text before the formatted value.
suffix	`string`	""	Text after the formatted value.
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.
displayValue	`number`	50	Live visual value while dragging when `commitonly`.
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	VuSliderChangeDetail	Committed or live value update.
vu-invalid	VuSliderInvalidDetail	When validation messages are recomputed.
vu-clear	VuSliderClearDetail	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 (`.slider-track`) with variant chrome.
value	Formatted value summary.
affix	Prefix or suffix text in the value summary.
highlight	Accent fill from min to the current value.
thumb-visual	Visible thumb on the highlight edge.
thumb	Native `<input type="range">` drag target.
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
setValue	- Sets value after clamp/snap and emits `vu-change`.
reset	- Restores `defaultValue` and dispatches `vu-clear`.
validateInput	- Runs validators and syncs validity.

Types

Name	Definition
VuSliderChangeDetail	`{ value: number; }`
VuSliderClearDetail	`{ value: number; }`
VuSliderInvalidDetail	`{ errors: string[]; }`
VuSliderRadius	`"sm" \| "md" \| "lg" \| "none" \| "full"`
VuSliderSize	`"sm" \| "md" \| "lg"`
VuSliderTone	`"subtle" \| "normal" \| "strong"`
VuSliderVariant	`"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>` (`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 value (`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	VuSliderVariant	"default"	Field chrome recipe. Default: `"default"`.
tone	VuSliderTone	"normal"	Neutral surface weight. Default: `"normal"`.
size	VuSliderSize	"md"	Track scale. Default: `"md"`.
radius	VuSliderRadius	"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`.
min	`number`	0	Minimum selectable value. Default: `0`.
max	`number`	100	Maximum selectable value. Default: `100`.
step	`number`	1	Step interval for snapping. Default: `1`.
value	`number`	50	Snapped slider value. Default: `50`.
displayvalue	`number`	—	Live visual value while dragging when `commitonly`.
prefix	`string`	""	Text before the formatted value.
suffix	`string`	""	Text after the formatted value.
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.
displayValue	`number`	50	Live visual value while dragging when `commitonly`.
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	VuSliderChangeDetail	Committed or live value update.
vu-invalid	VuSliderInvalidDetail	When validation messages are recomputed.
vu-clear	VuSliderClearDetail	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 (`.slider-track`) with variant chrome.
value	Formatted value summary.
affix	Prefix or suffix text in the value summary.
highlight	Accent fill from min to the current value.
thumb-visual	Visible thumb on the highlight edge.
thumb	Native `<input type="range">` drag target.
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
setValue	- Sets value after clamp/snap and emits `vu-change`.
reset	- Restores `defaultValue` and dispatches `vu-clear`.
validateInput	- Runs validators and syncs validity.

Types

Name	Definition
VuSliderChangeDetail	`{ value: number; }`
VuSliderClearDetail	`{ value: number; }`
VuSliderInvalidDetail	`{ errors: string[]; }`
VuSliderRadius	`"sm" \| "md" \| "lg" \| "none" \| "full"`
VuSliderSize	`"sm" \| "md" \| "lg"`
VuSliderTone	`"subtle" \| "normal" \| "strong"`
VuSliderVariant	`"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