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; }