Slider

A slider is a visual representation and action to let the user select from a range of values.

Basic Sliders

Lets you select a value along the whole range.

Volume

Disabled Slider

<MudSlider Value="@value">Volume</MudSlider>
<MudSlider Disabled="true" Value="@(20)">Disabled Slider</MudSlider>
@code {
    double value = 50.0;
}
Filled

The slider also supports Variant.Filled which fills the selected value's portion of the slider.

Volume

<MudSlider Value="@value" Variant="Variant.Filled">Volume</MudSlider>
@code {
    double value = 50.0;
}
Step Sliders

You can choose the increment with the Step prop.

<MudSlider Step="10" Value="70" Color="Color.Success" />
<MudSlider Step="25" Value="50" Color="Color.Warning" />

Copyright © 2020-2024 MudBlazor.

Powered by .NET 8.0.8

An error has occurred. This application may no longer respond until reloaded. Reload 🗙