Slider

<NaviusSlider @bind-Value="_value" Min="0" Max="100" Step="1"
              class="relative flex h-5 w-full items-center">
    <NaviusSliderTrack class="relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted">
        <NaviusSliderRange class="bg-primary" />
    </NaviusSliderTrack>
    <NaviusSliderThumb class="block h-5 w-5 rounded-full border border-primary/60 bg-background
                              focus-visible:ring-2 focus-visible:ring-ring" />
</NaviusSlider>

@code { private IReadOnlyList<double> _value = new double[] { 60 }; }

Features

• Can be controlled (@bind-Value) or uncontrolled (DefaultValue).
• Supports multiple thumbs: add more than one NaviusSliderThumb for a range.
• Supports a custom Step, Min/Max and MinStepsBetweenThumbs.
• Horizontal or vertical orientation, with optional Inverted direction and RTL support.
• Full keyboard navigation; the thumb is role="slider" with the correct aria-value* state.
• Renders a hidden number input per thumb (when Name is set) for native form submission.

Installation

Reference the Navius.Primitives package for the headless primitive, or vendor a styled version with the CLI: navius add copies the styled zits/ui component plus the brain files it depends on.

navius add slider

Anatomy

Import the parts and assemble them.

@using Navius.Primitives.Components.Slider

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

API Reference

Root

Contains all the parts of a slider. Owns the value array and cascades it to the parts. Renders a span.

Data attributes

Track

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

Data attributes

Range

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

Data attributes

Thumb

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

Data attributes

Accessibility

Implements the slider WAI-ARIA APG pattern: each thumb exposes aria-valuemin, aria-valuemax, aria-valuenow and aria-orientation; the bounds narrow to the neighbouring thumbs on a multi-thumb slider. Behavior is covered by the browser test suite and an axe-core WCAG gate in CI.

When the slider has no visible label, give each NaviusSliderThumb an aria-label (or aria-labelledby) so assistive technology can announce what it controls.

Keyboard interactions