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" />
Min and Max Values

With the Min and Max properties, you can set the minimum and maximum allowed value.

Value: 50

Value: -0.75

<MudSlider @bind-Value="value1" Min="20" Max="80" Color="Color.Info">Value: @value1.ToString()</MudSlider>
<MudSlider @bind-Value="value2" Min="-1" Max="1" Step="0.05" Color="Color.Error">Value: @value2.ToString("F2")</MudSlider>
@code {
    public double value1 = 50;
    public double value2 = -0.75;
}
Ticks
Display Ticks

Tick marks can be displayed with TickMarks property set to true, its common that its combined with the Step property as well.

<MudSlider TickMarks="true" Step="10" Value="@value" />
@code {
    int value = 50;
}
Labels

Labels can be added to each tick by providing a string array to the TickMarkLabels property.

Korv

Fisk

Äpple

Groda

Köttbullar

Pizza

Korv

Fisk

Äpple

Groda

Köttbullar

<MudSlider TickMarks="true" TickMarkLabels="@labels" Step="10" Value="@value" />
<MudSlider TickMarks="true" TickMarkLabels="@labels" Step="25" Value="@value"/>
@code {
    int value = 50;
    string[] labels = new string[] { "Korv", "Fisk", "Äpple", "Groda", "Köttbullar", "Pizza" };
}
Value Label

Use the slider below to see the value label, this can be used by setting ValueLabel property to true.

50
<MudSlider Value="@value" ValueLabel="true" />
@code {
    double value = 50.0;
}
Size

<MudSlider Size="Size.Small" Value="@value"/>
<MudSlider Size="Size.Medium" Value="@value"/>
<MudSlider Size="Size.Large" Value="@value"/>
@code {
    int value = 50;
}
Vertical

MudSlider can be displayed vertically with the Vertical property set to true.

Vertical

<MudSlider Value="@value" Vertical="true">Vertical</MudSlider>
<MudSlider Value="@value" Vertical="true"/>
@code {
    double value = 50.0;
}

Copyright © 2020-2024 MudBlazor.

Powered by .NET 8.0.3

An unhandled error has occurred. Reload 🗙