Props

Property	Type	Default	Description
v-model	number | [number, number]	—	Required. A single value or a range.
label	string	—	Required. The slider name.
id	string	—	Association ID prefix. Generated when omitted.
min	number	0	Minimum value.
max	number	100	Maximum value.
step	number	1	Increment per step. Must be greater than 0.
minStepsBetweenThumbs	number	0	Minimum number of steps between range thumbs.
orientation	'horizontal' | 'vertical'	horizontal	Slider orientation.
valueDisplay	'tooltip' | 'text' | 'none'	tooltip	How to display values.
formatValue	(value: number) => string	—	Formats display values and accessible value text.
marks	SliderMark[]	—	Marks. Each has a value and optional label.
description	string	—	Description below the label.
isLabelHidden	boolean	false	Hides the visual label. Preserves its accessible name.
isDisabled	boolean	false	Prevents changes. Excludes form values.
disabledMessage	string	—	Disabled reason. Keeps disabled thumbs focusable.
isRequired	boolean	false	Shows the required marker. Does not run native required validation.
isOptional	boolean	false	Shows the optional marker. Overrides isRequired.
requiredLabel	string	Required	Required marker text.
optionalLabel	string	Optional	Optional marker text.
minLabel	string	Minimum value	Accessible name for the lower thumb.
maxLabel	string	Maximum value	Accessible name for the upper thumb.
width	number | string	—	Field width. Numbers use pixels.
htmlName	string	—	Name for hidden form values.
form	string	—	ID of the associated form.
status	FieldStatusInput	—	Error, warning or success status.
labelIcon	Component	—	Decorative label icon.
labelTooltip	string	—	Information tooltip beside the label.

Events

• update:modelValue(value): updates a number or range.
• change(value): fires when the value changes.
• changeEnd(value): fires after a drag, pointer cancellation or keyboard adjustment.

Each supported key press fires changeEnd. An unchanged value at a boundary does not fire change. Disabling the component during a drag cancels that drag. This cancellation does not fire changeEnd.

Ranges and steps

• Use a number for single-value mode.
• Use [number, number] for range mode.
• Steps are relative to min.
• Minimum separation is minStepsBetweenThumbs × step.
• Thumbs cannot cross.
• Values outside the bounds display at the nearest bound.
• Input ranges display in ascending order.
• Display normalization does not update the bound model by itself.
• Non-positive steps use 1.
• If max is below min, the interval collapses to min.

Forms

• Set htmlName to submit one hidden field for a single value.
• Ranges submit two hidden fields with the same name.
• Read ranges with FormData.getAll(name).
• Disabled sliders do not submit values.
• Native form reset does not change v-model.
• Update the bound value in the form's reset handler to reset it.

Template references and attributes

• element: the control's HTMLDivElement | null.
• focus(index = 0, options?): focuses the specified thumb.
• blur(): removes thumb focus.
• class, style and other attributes apply to the outer field.
• aria-labelledby and aria-describedby merge into each thumb.
• The component owns thumb roles, values, bounds and disabled states.
• The labelIcon slot replaces the label icon.

Theme

.my-slider {
  --astryx-slider-accent: #047857;
  --astryx-slider-focus: #047857;
  --astryx-slider-height: 200px;
}

• --astryx-slider-track: unfilled track color.
• --astryx-slider-accent: filled track and thumb color.
• --astryx-slider-focus: keyboard focus color.
• --astryx-slider-height: vertical control height.

Thumb diameter is fixed at 20px. Track thickness is 4px. Neutral follows the active light or dark mode.