Slider

bo-slider provides a native range control with keyboard and screen-reader support. Pair it with a visible label and value when precision matters.

Interactive value

Volume 50%

<bo-slider v-model="value" :min="0" :max="100" :step="5" aria-label="Volume" />

Reserved capacity 35%

<bo-slider v-model="disabledValue" :min="0" :max="100" disabled aria-label="Reserved capacity" />

States and guidance

Use min, max, and step to communicate the domain. Disabled sliders remain visible with their value. For a value that must be exact, include a number input or a text readout; do not make users drag to reach a value.

Keyboard users can focus the slider and use Arrow keys for one step, Page Up/Page Down for larger changes, and Home/End for bounds. Preserve visible focus and provide a label; the value should not be communicated by color alone. On small screens, make the track full width and provide a generous thumb target.

API reference

Prop	Type	Default	Description
modelValue	number	0	Current value (v-model).
min	number	0	Lower bound.
max	number	100	Upper bound.
step	number	1	Increment.
disabled	boolean	false	Disable interaction.
ariaLabel	string	-	Accessible name when no visible label exists.

update:modelValue emits the new number on each change.