Slider

RzSlider provides single-value and range selection with shadcn-style slider anatomy: root, track, range, and thumbs. It renders initial value state on the server, uses Alpine for drag/click/keyboard behavior, and posts values through hidden inputs for SSR form workflows.

Under the Hood

RzSlider initializes with x-data="rzSlider". Thumb positions and hidden inputs are server-rendered first for SSR stability, then Alpine enhances interaction. There are no Blazor live callbacks; hidden inputs are the form-post contract.

Basic Usage

Single-thumb slider for selecting one value.

Source

<RzSlider Name="Volume" DefaultValue="
" Min="0" Max="100" Step="1" />

Range Slider

Two-thumb slider with minimum spacing.

Source

<RzSlider Name="Price" DefaultValue="
" Min="0" Max="100" Step="1" MinStepsBetweenThumbs="5" />

Vertical Orientation

Vertical slider variant for narrow layouts.

Source

<RzSlider Name="Gain" DefaultValue="
" Orientation="SliderOrientation.Vertical" Min="0" Max="100" />

Disabled State

Render a non-interactive slider for read-only scenarios.

Source

<RzSlider Name="ReadOnly" DefaultValue="
" Disabled="true" />

Form Post Example

Hidden inputs are emitted using indexed names for model binding compatibility.

Source

<form method="post" action="/components/slider">
    <RzSlider Name="PriceRange" DefaultValue="
" UseIndexedNames="true" />
    <RzButton Type="ButtonType.Submit" class="mt-4">Submit</RzButton>
</form>

Parameters

Parameter	Type	Description
Value	double[]?	Server-provided current values.
DefaultValue	double[]?	Fallback initial values when Value is null.
Min	double	Minimum allowed slider value.
Max	double	Maximum allowed slider value.
Step	double	Value increment used for snapping.
Orientation	SliderOrientation	Horizontal or vertical layout.
Disabled	bool	Disables pointer and keyboard interactions.
Inverted	bool	Inverts value-to-position mapping.
MinStepsBetweenThumbs	double	Minimum distance between adjacent thumbs.
Name	string?	Base name for hidden form inputs.
UseIndexedNames	bool	Use names like Name[0], Name[1].
AriaLabel	string?	Default single-thumb label.
AriaLabels	string[]?	Per-thumb labels for range mode.
AriaLabelledBy	string?	ID reference for visible external label.
AriaDescribedBy	string?	ID reference for external helper text.
ComponentAssetKeys	string[]	Logical asset keys resolved via RizzyUIConfig.

Alpine API

RzSlider uses an internal Alpine API for pointer and keyboard behavior; no public client API is intended for direct consumption.