Slider

Overview

Slider is an input where the user selects a value from within a given range. It can be controlled (@bind-Value) or uncontrolled (DefaultValue), and supports multiple thumbs for a range slider: add more than one NaviusSliderThumb and the value array grows to match.

Anatomy

@using Navius.Primitives.Components.Slider

<NaviusSlider>
    <NaviusSliderTrack>
        <NaviusSliderRange />
    </NaviusSliderTrack>
    <NaviusSliderThumb />
</NaviusSlider>

Root

Owns the value array and cascades it to the parts. Renders a span.

Prop	Type	Default	Description
Value	IReadOnlyList<double>?	-	Controlled values (one per thumb). Pair with ValueChanged (@bind-Value).
ValueChanged	EventCallback<IReadOnlyList<double>>	-	Fires when the controlled value should change.
DefaultValue	IReadOnlyList<double>?	-	Initial values for uncontrolled use (one per thumb).
ValueCommitted	EventCallback<IReadOnlyList<double>>	-	Fires when the value is committed (pointer up / key edit), distinct from per-change ValueChanged.
Min	double	0	Minimum value.
Max	double	100	Maximum value.
Step	double	1	Step size.
MinStepsBetweenThumbs	int	0	Minimum number of steps that must separate adjacent thumbs; prevents thumbs from crossing.
LargeStep	double	0	Explicit large step for PageUp/Down + Shift+Arrow. 0 uses the heuristic max(Step, 10% of range snapped to Step).
Orientation	string	"horizontal"	"horizontal" or "vertical".
Inverted	bool	false	Inverts the positional direction so high values sit at the start of the track.
Dir	string?	-	"ltr" or "rtl". Falls back to the cascaded direction, then "ltr".
Disabled	bool	false	Disables the whole control.
Name	string?	-	Form field name. When set, a hidden number input per thumb is rendered for native submission.
Form	string?	-	Optional id of an associated form element (HTML form attribute).
ChildContent	RenderFragment?	-	The slider’s parts.
Attributes	IDictionary<string, object>?	-	Forwarded to the rendered span.

Track

The rail the range fills and the thumb travels along. Renders a span.

Prop	Type	Default	Description
ChildContent	RenderFragment?	-	The Range part.
Attributes	IDictionary<string, object>?	-	Forwarded to the rendered span.

Range

The filled portion of the track between the lowest and highest thumb. Renders a span (absolutely positioned).

Prop	Type	Default	Description
Attributes	IDictionary<string, object>?	-	Forwarded to the rendered span.

Thumb

A draggable handle and the accessibility surface (role="slider"). Add one per value. Renders a span (absolutely positioned).

Prop	Type	Default	Description
ChildContent	RenderFragment?	-	Thumb content.
Attributes	IDictionary<string, object>?	-	Forwarded to the rendered span.

Data attributes

Part	Attribute	Description
Root	data-orientation	"horizontal" | "vertical"
Root	data-disabled	Present when disabled.
Root	data-dragging	Present while a thumb is being dragged.
Track	data-orientation	"horizontal" | "vertical"
Track	data-disabled	Present when disabled.
Range	data-orientation	"horizontal" | "vertical"
Range	data-disabled	Present when disabled.
Thumb	data-orientation	"horizontal" | "vertical"
Thumb	data-disabled	Present when disabled.
Thumb	data-index	The thumb’s 0-based registration index.
Thumb	data-dragging	Present on the thumb currently being dragged.

Keyboard interactions

Key	Behavior
ArrowRight	Increments the value by Step (flips under RTL / Inverted).
ArrowLeft	Decrements the value by Step (flips under RTL / Inverted).
ArrowUp	Increments the value by Step.
ArrowDown	Decrements the value by Step.
Shift + Arrow	Increments / decrements by the large step.
PageUp	Increments the value by the large step.
PageDown	Decrements the value by the large step.
Home	Sets the value to Min.
End	Sets the value to Max.

ARIA mechanism

Each Thumb renders role="slider" with aria-valuemin, aria-valuemax, aria-valuenow, and aria-orientation; the bounds narrow to the neighboring thumbs on a multi-thumb slider. When the slider has no visible label, an aria-label (or aria-labelledby) on each Thumb tells assistive technology what it controls. This implements the WAI-ARIA APG slider pattern and is covered by the Playwright browser test suite and gated by axe-core in CI.