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

Install the brain, or copy just this primitive in with the CLI.

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

Adheres to the slider WAI-ARIA design 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.

Keyboard interactions