Props

Required props

Prop	Type	Description
modelValue (v-model)	Number | Array | String	Slider value(s)
range	Object	Min/max range. E.g.: { min: 0, max: 100 }

noUiSlider props

Prop	Type	Default	Description
start	Number | Array | String	—	Value that reset() returns to. If not provided, uses modelValue
connect	Boolean | Array | String	false	Bar between handles. true, 'lower', 'upper' (1 handle) or boolean array
step	Number	—	Increment between values
snap	Boolean	—	Forces jumping between range values
margin	Number	—	Minimum distance between handles
limit	Number	—	Maximum distance between handles
padding	Number | Array	0	Minimum distance from edges. [10, 15] for asymmetric
orientation	String	'horizontal'	'horizontal' or 'vertical'
direction	String	'ltr'	'ltr' or 'rtl'
tooltips	Boolean | Object | Array | Function	false	Tooltips above handles
animate	Boolean	false	Transition on tap or .set()
animationDuration	Number	300	Animation duration in ms
behaviour	String	'tap'	Hyphen-separated keywords. See options
format	Object	—	{ to: fn, from: fn } for formatting values
pips	Object	null	Marks configuration. See pips
handleAttributes	Array	—	HTML attributes per handle
ariaFormat	Object	—	Formatter for aria attributes
keyboardSupport	Boolean	true	Arrow key support
keyboardDefaultStep	Number	10	Default keyboard step
keyboardMultiplier	Number	1	Arrow key multiplier
keyboardPageMultiplier	Number	5	Page Up/Down multiplier
cssPrefix	String	—	Custom CSS prefix
cssClasses	Object	—	CSS class overrides
disable	Boolean	false	Disables the slider

Wrapper props

Prop	Type	Default	Description
id	String	auto-generated	Slider element ID
pipsys	Boolean	false	Shortcut for pips with mode: 'steps'
clickablePips	Boolean	false	Clicking pips moves the closest handle
tooltipOnClick	Boolean	false	Tooltips only when interacting with the handle
mergeTooltips	Object	null	{ threshold, separator } to merge nearby tooltips

TIP

All props are reactive. You can change any prop at runtime and the slider updates automatically.