RangeSliderExample2.razor

@namespace MudExtensions.Docs.Examples

<MudGrid>
    <MudItem xs="12" sm="8">
        <MudRangeSlider @bind-Value="@_value" @bind-UpperValue="@_upperValue" Size="Size.Large" Variant="Variant.Filled" ValueLabel="true" Range="true"
                        Min="_min" Max="_max" SlideableMin="@_slideableMin" SlideableMax="@_slideableMax" Step="_step" Display="true">@_label</MudRangeSlider>
   </MudItem>

    <MudItem xs="12" sm="4">
        <MudStack>
            <MudTextField @bind-Value="_label" Label="Label" Variant="Variant.Outlined" Margin="Margin.Dense" />
            <MudNumericField @bind-Value="_value" Label="Lower Value" Variant="Variant.Outlined" Margin="Margin.Dense" />
            <MudNumericField @bind-Value="_upperValue" Label="Upper Value" Variant="Variant.Outlined" Margin="Margin.Dense" />
            <MudNumericField @bind-Value="_min" Label="Min" Variant="Variant.Outlined" Margin="Margin.Dense" />
            <MudNumericField @bind-Value="_max" Label="Max" Variant="Variant.Outlined" Margin="Margin.Dense" />
            <MudNumericField @bind-Value="_slideableMin" Label="Slideable Min" Variant="Variant.Outlined" Margin="Margin.Dense" />
            <MudNumericField @bind-Value="_slideableMax" Label="Slideable Max" Variant="Variant.Outlined" Margin="Margin.Dense" />
            <MudNumericField @bind-Value="_step" Label="Step" Variant="Variant.Outlined" Margin="Margin.Dense" />
        </MudStack>
   </MudItem>
</MudGrid>

@code {
    private int _value = 25;
    private int _upperValue = 75;
    string _label = "Range";
    int _min = 0;
    int _max = 100;
    int? _slideableMin = 10;
    int? _slideableMax = 90;
    int _step = 1;
}