Mudblazor
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Slider

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

See Slider API for parameter documentation.

Basic Sliders

Lets you select a value along the whole range.

Volume

Disabled Slider

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudGrid>
    <MudItem>
        <MudSlider Value="@value">Volume</MudSlider>
        <MudSlider Disabled="true" Value="@(20)">Disabled Slider</MudSlider>
    </MudItem>
    <MudItem>
        <div class="demo-slider-filler"></div>
        <MudSlider Value="@value" />
        <div class="demo-slider-filler"></div>
        <MudSlider Value="@value" Disabled="true" />
    </MudItem>
</MudGrid>
@code {
    double value = 50.0;
}

Step Sliders

You can choose the increment with the steps prop.

Temperature

Disabled

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudSlider Step="10" Value="70">Temperature</MudSlider>
<MudSlider Step="10" Value="50" Disabled="true">Disabled</MudSlider>

Minimum and Maximum Values

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

Value: 50

Value: -0.75

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudSlider @bind-Value="value1" Min="20" Max="80">Value: @value1.ToString()</MudSlider>
<MudSlider @bind-Value="value2" Min="-1" Max="1" Step="0.05">Value: @value2.ToString("F2")</MudSlider>
@code {
    public double value1 = 50;
    public double value2 = -0.75;
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙