Slider — Marai.UI

Overview

MSlider wraps a native <input type="range">, giving you complete control over track and thumb appearance through the Class parameter. It handles value binding, min/max/step enforcement, disabled state, and EditForm integration via ValueExpression.

Usage

Add the namespace import and include the stylesheet reference if not already done.

razor

@using Marai.UI.Components.MSlider

Basic Usage

Preview

razor

<MSlider Class="w-80" />

Examples

Tailwind Styling

Apply any Tailwind utility through Class. Use accent-* utilities to control thumb color, w-* for width, and h-* for track height. All styling is consumer-owned.

Preview

Default browser styling

accent-blue-500

accent-green-500

accent-red-500

accent-amber-500

razor

<div class="flex flex-col gap-4 max-w-xs">
    <div class="flex flex-col gap-1.5">
        <span class="text-xs text-muted-foreground">Default browser styling</span>
        <MSlider Value="50" Class="w-full" />
    </div>
    <div class="flex flex-col gap-1.5">
        <span class="text-xs text-muted-foreground">accent-blue-500</span>
        <MSlider Value="65" Class="w-full accent-blue-500" />
    </div>
    <div class="flex flex-col gap-1.5">
        <span class="text-xs text-muted-foreground">accent-green-500</span>
        <MSlider Value="40" Class="w-full accent-green-500" />
    </div>
    <div class="flex flex-col gap-1.5">
        <span class="text-xs text-muted-foreground">accent-red-500</span>
        <MSlider Value="25" Class="w-full accent-red-500" />
    </div>
    <div class="flex flex-col gap-1.5">
        <span class="text-xs text-muted-foreground">accent-amber-500</span>
        <MSlider Value="75" Class="w-full accent-amber-500" />
    </div>
</div>

Default Value

Supply a Value to position the thumb at a specific starting point.

Preview

razor

<MSlider Value="40" Class="w-80" />

Two-Way Binding

Use @bind-Value to keep a field in sync with the slider position.

Preview

Value: 0

razor

<div class="flex flex-col gap-3 max-w-xs">
    <MSlider @bind-Value="_value" Class="w-full" />
    <p class="text-sm text-muted-foreground">Value: @_value</p>
</div>

@code {
    private double _value;
}

Min, Max, and Step

Configure the range and granularity with Min, Max, and Step.

Preview

Value: 0 (step 2, max 10)

razor

<div class="flex flex-col gap-3 max-w-xs">
    <MSlider @bind-Value="_value" Min="0" Max="10" Step="2" Class="w-full" />
    <p class="text-sm text-muted-foreground">Value: @_value (step 2, max 10)</p>
</div>

@code {
    private double _value;
}

Disabled

Pass Disabled="true" to set the native disabled attribute on the input.

Preview

razor

<MSlider Value="60" Disabled="true" Class="w-80" />

In a Form

Use @bind-Value inside an EditForm for model binding and validation support.

Note

Supply a ValueExpression when you need <ValidationMessage> to identify the field. With @bind-Value this is handled automatically by the Blazor compiler.

razor

<EditForm Model="_model" OnValidSubmit="HandleSubmit">
    <DataAnnotationsValidator />
    <div class="flex flex-col gap-2 max-w-xs">
        <MLabel For="volume">Volume</MLabel>
        <MSlider id="volume" @bind-Value="_model.Volume" Min="0" Max="100" Step="5" Class="w-full" />
        <ValidationMessage For="() => _model.Volume" />
    </div>
    <MButton Type="submit" Class="mt-4">Submit</MButton>
</EditForm>

@code {
    private readonly MyModel _model = new();

    private void HandleSubmit() { /* ... */ }
}

Customization

Custom Tailwind CSS Classes

Use the Class parameter to apply Tailwind utility classes directly to the <input> element. Width, track height, accent color, and any other styling are fully consumer-controlled.

Preview

Narrow (w-48)

Thicker track (h-3)

razor

<div class="flex flex-col gap-4 max-w-xs">
    <div class="flex flex-col gap-1.5">
        <span class="text-xs text-muted-foreground">Narrow (w-48)</span>
        <MSlider Value="50" Class="w-48" />
    </div>
    <div class="flex flex-col gap-1.5">
        <span class="text-xs text-muted-foreground">Thicker track (h-3)</span>
        <MSlider Value="60" Class="h-3 w-full" />
    </div>
</div>

Standard HTML Attributes

MSlider supports all standard HTML range input attributes via AdditionalAttributes. Pass any attribute directly — id, name, aria-label, aria-describedby — and it will be forwarded to the underlying <input>.

Preview

Volume

Current: 50%

razor

<div class="flex flex-col gap-2 max-w-xs">
    <MLabel For="volume-slider">Volume</MLabel>
    <MSlider id="volume-slider"
             @bind-Value="_volume"
             Min="0"
             Max="100"
             Step="5"
             Class="w-full"
             aria-label="Volume control"
             aria-describedby="volume-hint" />
    <p id="volume-hint" class="text-sm text-muted-foreground">Current: @_volume%</p>
</div>

@code {
    private double _volume = 50;
}

Customization Examples

Width: Class="w-48" or Class="w-full"
Track height: Class="h-3" for a thicker track
Thumb color: Class="accent-blue-500"
Accessibility: aria-label="...", aria-describedby="..."
Forms: name="..." for form submission grouping
Testing: data-testid="...", id="..."

Accessibility

Renders a native <input type="range"> — keyboard accessible (arrow keys move the thumb) out of the box
Always associate with a visible label using MLabel with matching id and For
Use aria-label when a visible label is not present
Use aria-describedby to link help text or current value display to the input
Set meaningful Min, Max, and Step values — browsers expose these to assistive technology

API Reference

MSlider

Parameter	Type	Default	Description
Value	double	`0`	The current slider value. Use with `@bind-Value` for two-way binding.
ValueChanged	EventCallback<double>	`—`	Callback invoked when the value changes. Wired automatically by `@bind-Value`.
ValueExpression	Expression<Func<double>>?	`null`	Expression identifying the bound field for `<ValidationMessage>`. Set automatically by `@bind-Value`.
Min	double	`0`	The minimum value of the slider range.
Max	double	`100`	The maximum value of the slider range.
Step	double	`1`	The increment between selectable values.
Disabled	bool	`false`	Sets the native `disabled` attribute on the input.
Class	string?	`null`	CSS class names applied to the input element. All styling is consumer-owned.
AdditionalAttributes	Dictionary<string, object>?	`null`	Arbitrary HTML attributes passed through to the `<input>` element (e.g. `aria-label`, `id`, `name`).