Basic Sliders
Lets you select a value along the whole range.
<MudSlider 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.
<MudSlider 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.
<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="" />
@code { int value = 50; }
Labels
Labels can be added to each tick by providing a string array to the TickMarkLabels property.
<MudSlider TickMarks="true" TickMarkLabels="" Step="10" Value="" /> <MudSlider TickMarks="true" TickMarkLabels="" Step="25" 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.
<MudSlider Value="" ValueLabel="true" />
@code { double value = 50.0; }
Size
<MudSlider Size="Size.Small" Value=""/> <MudSlider Size="Size.Medium" Value=""/> <MudSlider Size="Size.Large" Value=""/>
@code { int value = 50; }
Vertical
MudSlider can be displayed vertically with the Vertical property set to true.
<MudSlider Value="" Vertical="true">Vertical</MudSlider> <MudSlider Value="" Vertical="true"/>
@code { double value = 50.0; }