BbSlider

Sets autofocus on page load.

Set the component in compact mode.

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

Descriptive text displayed below the label and above the input. Unlike the hint it is always visible, and it is linked to the input via 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.

Direction of the layout of the component. Can either be a predefined value or a pattern separated by a space like 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.

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.

Can be a string or an array of string containing the messages to display. They render in an aria-live="polite" region (announced when they appear) and, while the list is non-empty, are referenced FIRST from the control's aria-describedby, so the reason the field is invalid is re-read whenever the control 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.

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 identifier of the component.

Text content of the label of the element.

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.

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.

Renders a hidden input carrying the JSON-serialised value under this name, for a classic form post. label does not fill it in.

Keeps the hint displayed.

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

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.

Sets the input as required.

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

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

The resolution every value snaps to, and the distance the arrow keys move. 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.

Warning messages to display beneath the field, in their own aria-live region and amber (--bb-text-warn). A string or array; a non-empty list implies the warning state. Errors suppress warnings when both are set. While displayed they are also referenced from the control's aria-describedby, after any errors and before the description/hint.

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.

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.

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 }, each moving one step and clamping to the interval. Both 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.