Components / Slider

Slider

An input where the user selects a value from within a given range: role="slider", fully keyboard-operable, with pointer drag from the engine. Pass an array of values for a multi-thumb range. The behaviour comes from the brain; this preview is the real component running in WebAssembly.

Examples

50
25 – 75
razor
<ZitsSlider @bind-Value="_volume" Max="100" Step="1" />

@* range: two thumbs *@
<ZitsSlider @bind-Value="_range" Max="100" MinStepsBetweenThumbs="1" />

@code {
    private IReadOnlyList<double> _volume = new double[] { 50 };
    private IReadOnlyList<double> _range = new double[] { 25, 75 };
}

Installation

Terminal bash
navius add slider

API reference

Prop Type Default
Value IReadOnlyList<double>? -
DefaultValue IReadOnlyList<double>? [0]
ValueCommitted EventCallback<IReadOnlyList<double>> -
Min double 0
Max double 100
Step double 1
MinStepsBetweenThumbs int 0
Orientation string "horizontal"
Inverted bool false
Dir string? -
Disabled bool false
Name string? -