Skip to main content

Blazor Range Input

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

Blazor Bootstrap: Range Input Component

Parameters

NameTypeDefaultRequiredDescriptionAdded Version
DisabledboolfalseGets or sets the disabled state.1.10.6
MaxTValueGets or sets the maximum value of the range input.1.10.6
MinTValueGets or sets the minimum value of the range input.1.10.6
Stepdouble1Gets or sets the step value of the range input.1.10.6
TickMarksIEnumerable<TickMark>nullGets or sets the tick marks.1.10.6
ValueTValueGets or sets the value of the range input.1.10.6

Methods

NameDescriptionAdded Version
Disable()Disables range input.1.10.6
Enable()Enables range input.1.10.6

Events

NameDescriptionAdded Version
ValueChangedThis event fires when the user specifies a numeric value.1.10.6

TickMark Properties

NameTypeDefaultRequiredDescriptionAdded Version
Labelstring?Gets or sets the label.1.10.6
Valuestring?Gets or sets the value.1.10.6

Examples

Basic usage

Blazor Bootstrap: Range Input Component - Basic usage
<RangeInput TValue="int" @bind-Value="amount1" Min="0" Max="100" />
@code {
int amount1 = 10;
}
Blazor Bootstrap: Range Input Component - Multiple
<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;
}

See demo here

Disabled

Use the Disabled parameter to disable the RangeInput.

Blazor Bootstrap: Range Input Component - Disabled parameter
<div class="mb-3">
<label class="form-label">Amount</label>
<RangeInput TValue="int?"
@bind-Value="amount"
Disabled="@disabled"
Min="0"
Max="100" />
</div>

<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>
<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
<Button Color="ButtonColor.Warning" @onclick="Toggle"> Toggle </Button>
@code {
private int? amount = 10;
private bool disabled = true;

private void Enable() => disabled = false;
private void Disable() => disabled = true;
private void Toggle() => disabled = !disabled;
}

Also, use Enable() and Disable() methods to enable and disable the RangeInput.

danger

Do not use both the Disabled parameter and Enable() & Disable() methods.

Blazor Bootstrap: Range Input Component - Disable method
<div class="mb-3">
<label class="form-label">Amount</label>
<RangeInput @ref="rangeInput"
TValue="int?"
@bind-Value="amount"
Min="0"
Max="100" />
</div>

<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>
@code {
private RangeInput<int?> rangeInput = default!;
private int? amount = 10;
private void Disable() => rangeInput.Disable();
private void Enable() => rangeInput.Enable();
}

See demo here

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.

caution

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.

Blazor Bootstrap: Range Input Component - Min and max
<div class="d-flex flex-row mb-3">
<RangeInput TValue="int" @bind-Value="amount1" Min="-10" Max="10" />
<Badge Color="BadgeColor.Primary" Class="ms-2" VisuallyHiddenText="amount1">@amount1</Badge>
</div>
@code {
int amount1 = -3;
}

See demo here

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.

Blazor Bootstrap: Range Input Component - Step
<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" Step="5" />
<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" Step="10" />
<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" Step="20" />
<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;
}

See demo here

Decimal values

Blazor Bootstrap: Range Input Component - Decimal values
<RangeInput TValue="decimal" @bind-Value="amount1" Min="0" Max="100" Step="0.01" />
<div class="mt-2">@amount1</div>
@code {
decimal amount1 = 0;
}

See demo here

Tick marks

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

Blazor Bootstrap: Range Input Component - Tick marks
<div class="d-flex mb-3">
<div class="flex-fill">
<RangeInput TValue="float" @bind-Value="temperature1" Min="0" Max="100" TickMarks="list" />
</div>
</div>
<Badge Color="BadgeColor.Primary" Class="mx-2" VisuallyHiddenText="amount1">@temperature1</Badge>
<span>Fahrenheit</span>
@code {
float temperature1 = 10;

IEnumerable<TickMark> list = new List<TickMark>
{
new(){ Label = "very cold!", Value = "0"},
new(){ Label = "cool", Value = "25"},
new(){ Label = "medium", Value = "50"},
new(){ Label = "getting warm!", Value = "75"},
new(){ Label = "hot!", Value = "100"},
};
}

See demo here