BbSlider

Focuses the field when it mounts (a dialog already open included), unless the user is typing in another field.

Compact density. The track's height follows --bb-input-h-compact and the label gap --bb-label-spacing-y-compact, so a --bb-input-h or --bb-label-spacing-y you set on the component is ignored while compact is on: set the -compact tokens instead.

A property of a screen, not of a control. One dense slider among five roomy ones reads as a mistake.

Text between the label and the input. Unlike the hint it is always visible; it joins the input's aria-describedby after any errors / warnings, before the hint.

Read before anything moves, which makes it the place to say what the interval means, and to explain a readonly slider.

Disables the component.

Removes the thumb from the tab order, so a disabled value is unreachable for someone navigating by keyboard. Prefer readonly for a value the user may read but not set.

Disables the proportional thumb translation that keeps the thumb on track (enabled by default). Set it when displaying ticks so they align with less effort.

Turns off the proportional nudge that keeps the thumb over the track at the extremes; set it with ticks when the handle should sit exactly on each mark. This is v2's thumbTranslate renamed with its polarity inverted, so :thumb-translate="false" becomes a bare disable-thumb-translate and an untouched default needs no change.

Error messages under the field, a string or array, in an aria-live="polite" region and first in the control's aria-describedby, so they are re-read when it regains focus.

Rare on a bounded control (the interval already prevents most invalid values), but available for the rules a range cannot express. Wired to every thumb through aria-describedby, so a range slider announces them from either handle.

Keep this control out of the enclosing BbForm entirely: not submitted, not dirty, not reset, not validated. For a control that is not form data (a filter, a "show advanced" switch).

For a slider inside a form that is not form data, such as a zoom level or a preview size.

Define if the component should be in an error state. It usually attaches a CSS class for styling purposes.

Define if the component should be in a warning state. Same chrome as errors with --bb-warn; errors take priority.

Visually hides the label of the input while maintaining accessibility.

Keeps the accessible name and removes only the visible text, for a filter whose surrounding heading already names it. Omitting label is not an option: the type requires it.

Text box to be displayed near the input, usually to indicate instructions.

The id of the native control; the label's for and the description and message ids derive from it. Generated when omitted.

Vertical position of the control in a side-by-side row; not inputPosition, the horizontal one. Omitted, the control's first line meets the label's.

Text content of the label of the element.

Vertical position of the label block in a side-by-side row; not labelPosition, the horizontal one. Omitted, the label's first line meets the control's.

Label rendering mode. Sliders do not support floating labels.

Two values, not three. A slider has no empty-versus-filled state for a label to float against, so an explicit "floating" warns in development and falls back to outside, while a project-wide defaultInputLabelMode: 'floating' degrades to outside with no warning at all.

Sets the text alignment of the label.

How label and input sit together: 'vertical', 'horizontal' (50/50), 'auto', 'label-fill', 'input-fill', a ratio like 'xx xxxxx', or a per-breakpoint map ({ default: 'vertical', md: 'xx xxxxx' }).

Applies only while the resolved label mode is outside. label-mode="inside" embeds the label in the field shell and forces the vertical layout, ignoring this silently.

Maximum value cap.

Validated at mount together with min: it must be strictly greater, finite, and inside the safe-integer range, or the component throws a RangeError.

Maximum decimal places to retain in emitted values.

What keeps 10.000000000000002 out of the model. A step finer than 0.01 needs this raised to match (:step="0.001" with :max-precision="3"), or the digits are rounded away as fast as you step through them.

Minimum value cap.

Validated at mount; see max. Together with step these are hard invariants rather than hints, because a slider with a nonsense interval is a control nobody can operate.

Used by v-model.

Defines the name of the input.

The key inside a BbForm, and the name of the hidden inputs for a classic form post: one field for a single value, one per value for a range (price=20&price=80; write price[] for PHP and Laravel). A null value posts nothing.

Keeps the hint displayed.

Passthrough, object form: the same keys as the pt:* attributes without the prefix. See the pt:<part> row.

Passthrough, attribute form: one attribute per part, pt:<part>, and per part and state, pt:<part>:<state>. Parts: bar, box, description, hint, label, message, root, thumb, tick, ticks, track. States: active, disabled, errors, inRange, readonly, warnings.

Set the input as range. modelValue must be an array.

Only one of the two mismatches is loud: range with a scalar model throws at mount, while an array model without range renders one thumb and silently ignores everything past the first element.

Sets the input in a readonly state.

Keeps the thumb focusable and exposes aria-readonly, which is why it beats disabled for a locked quota. Say why it is locked in the description or the hint.

Reverses the layout. Applicable in every direction the order of the label and the input is swapped.

vee-validate rules for this field. Only inside a BbForm.

Rules that restate min or max have nothing left to catch (the model never settles outside the interval), so use them for what the bounds cannot say, such as a minimum gap between the two ends of a range.

The step attribute specifies the granularity that the value must adhere to.

The grid every value snaps to, from the pointer, the keys and the steppers alike. When max is off the grid the top is the last grid point: 0–10 by 3 stops at 9. Must be finite and greater than zero, or the component throws at mount.

Displays ticks on step.

Lays out one positioned element per step below the track and renders the tick slot into each. Without that slot it produces empty spans and no visible marks: the mark itself is yours to draw.

The field's name in validation messages ({field}): "Email is not valid". Defaults to the label (or legend), then "This field"; never the name. Set it when the label is hidden or reads badly in a sentence (icon-only, a question). BbForm only.

When the field validates: aggressive (each change), balanced (on leave, then live while in error), lazy (on leave), submit-only, submit-live. Unset: the BbForm's validation-mode, then formControls.validationMode ('balanced'). BbForm only.

Warning messages under the field, a string or array: amber, in their own aria-live region and in the control's aria-describedby after the errors. Non-empty turns on the warning state; errors win when both are set.

The amber channel: accepted, and worth a second look. Suppressed entirely when the slider also has errors.

number for a single value, a two-element array with range, null for unset. v2 also accepted a string; in v3 it does not compile, so parse at the boundary rather than binding what an API returned.

Emitted when the slider gains focus and becomes interactive.

Emitted when a thumb gains focus. Forwards the original DOM FocusEvent.

Emitted when focus/click moves outside the slider after it was active.

Fires when the interaction ends: the hook for a commit-on-release save. Never derive the value from it: update:modelValue already carries the clamped, snapped result.

Emitted for keyboard interaction on a thumb. Forwards the original DOM KeyboardEvent.

Emitted when a pointer device is pressed on a thumb. Forwards the original DOM PointerEvent.

Emitted as a pointer device moves while dragging a thumb. Forwards the original DOM PointerEvent.

Emitted when a pointer device is released after dragging. Forwards the original DOM PointerEvent.

Emitted with new value(s) whenever the slider position changes. Single number for single slider, array for range mode.

Content rendered after the slider track, typically used to add a max-value label or button.

The other half of the stepper pair; see prepend. Icon-only buttons here need an aria-label each.

Replaces the description text. Provided alone (no description prop) it still renders the description region and wires it into aria-describedby.

Replaces the default label text rendered above the slider.

Content rendered before the slider track, typically used to add a min-value label or button.

Receives { increase, decrease, disabled }: the callbacks move one step and clamp to the interval; disabled is true when this side would do nothing (at min, or while the slider is disabled, readonly or a range), so bind it to your button. The callbacks are single-value only and early-return in range mode.

Fallback thumb used for non-range sliders (or inside thumb:higher/thumb:lower when not overridden separately).

Renders inside the thumb rather than replacing it, so content positioned against it travels with the handle. Receives { value, percent, focused }.

Replaces the default higher-value thumb in range mode (range: true).

The higher handle of a range. Falls back to thumb when unset.

Replaces the default lower-value thumb in range mode (range: true).

The lower handle of a range. Falls back to thumb when unset.

Replaces the default tick mark rendered at each step when ticks are enabled.

Receives { value, percent, active }. This is where the tick mark or the per-step label is drawn; ticks positions the slot and draws nothing itself.