The Slider component provides a range input for selecting numeric values within a configurable range.

Installation

shellui add slider

Usage

Basic

<Slider Value="@value" ValueChanged="@HandleChanged" />

@code {
    private double value = 50;

    private void HandleChanged(double newValue)
    {
        value = newValue;
    }
}

Two-way Binding

<Slider @bind-Value="volume" />

@code {
    private double volume = 50;
}

With Label and Display

<div class="space-y-2">
  <div class="flex justify-between">
    <Label>Volume</Label>
    <span class="text-sm text-muted-foreground">@volume%</span>
  </div>
  <Slider @bind-Value="volume" Min="0" Max="100" />
</div>

@code {
    private double volume = 50;
}

Custom Range and Step

<div class="space-y-2">
  <Label>Temperature: @temperature°C</Label>
  <Slider @bind-Value="temperature" Min="0" Max="40" Step="0.5" />
</div>

@code {
    private double temperature = 20;
}

Disabled

<Slider Value="50" Disabled="true" />

API Reference

Parameter	Type	Default	Description
`Value`	`double`	`50`	Current slider value
`ValueChanged`	`EventCallback<double>`	—	Fires when value changes
`Min`	`double`	`0`	Minimum value
`Max`	`double`	`100`	Maximum value
`Step`	`double`	`1`	Step increment
`Disabled`	`bool`	`false`	Disables the slider
`Class`	`string?`	`null`	Additional CSS classes

Accessibility

Proper ARIA attributes (role="slider", aria-valuenow, aria-valuemin, aria-valuemax)
Keyboard navigation support (Arrow keys)
Screen reader compatible

Slider

On this page