Blazor Range Input

Blazor Bootstrap RangeInput component is built around HTML input of type="range".

Basic usage#

razor
<RangeInput TValue="int" @bind-Value="amount1" Min="0" Max="100" />

@code {
    int amount1 = 10;
}
10amount1
20amount2
30amount3
40amount4
razor
<div class="d-flex flex-row mb-3">
    <RangeInput TValue="int" @bind-Value="amount1" Min="0" Max="100" />
    <Badge Color="BadgeColor.Primary" Class="ms-2" VisuallyHiddenText="amount1">@amount1</Badge>
</div>
<div class="d-flex flex-row mb-3">
    <RangeInput TValue="int?" @bind-Value="amount2" Min="0" Max="100" />
    <Badge Color="BadgeColor.Primary" Class="ms-2" VisuallyHiddenText="amount2">@amount2</Badge>
</div>
<div class="d-flex flex-row mb-3">
    <RangeInput TValue="float" @bind-Value="amount3" Min="0" Max="100" />
    <Badge Color="BadgeColor.Primary" Class="ms-2" VisuallyHiddenText="amount3">@amount3</Badge>
</div>
<div class="d-flex flex-row mb-3">
        <RangeInput TValue="float?" @bind-Value="amount4" Min="0" Max="100" />
    <Badge Color="BadgeColor.Primary" Class="ms-2" VisuallyHiddenText="amount4">@amount4</Badge>
</div>

@code {
    int amount1 = 10;
    int? amount2 = 20;
    float amount3 = 30;
    float? amount4 = 40;
}

Disabled#

Use the Disabled parameter to disable the RangeInput.
Also, use Enable() and Disable() methods to enable and disable the RangeInput.
Danger
Do not use both the Disabled parameter and Enable() & Disable() methods.

Min and max#

Set the Min and Max parameters to restrict the user input between the Min and Max range. By default, the minimum is 0.
NOTE

By default the maximum is 100 for sbyte?, short?, int?, long?, float?, double? and decimal? data types. For other data types it is 0.

If the user tries to specify a numeric value which is out of range, then it will override with Min or Max value based on the context. If the user input is less than the minimum value, then it will override with the Min value. If the user input exceeds the maximum value, it will override with the Max value.

Step#

The Step parameter is a number that specifies the granularity that the value must adhere to. Only values that match the specified stepping interval are valid.

Tick marks#

To add tick marks to a RangeInput, set the TickMarks parameter.