Blazor RangeInput

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

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.

Amount

<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()
    {
        Console.WriteLine($"BEFORE Enable: disabled: {disabled}");
        disabled = false;
        Console.WriteLine($"AFTER Enable: disabled: {disabled}");
    }

    private void Disable()
    {
        Console.WriteLine($"BEFORE Disable: disabled: {disabled}");
        disabled = true;
        Console.WriteLine($"AFTER Disable: disabled: {disabled}");
    }

    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.

Amount

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

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.

-3

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

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.

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

Decimal values #

Razor

<RangeInput TValue="decimal" @bind-Value="amount1" Min="0" Max="100" Step="0.01" />
<div class="mt-2">@amount1</div>

@code {
    decimal amount1 = 0;
}

Tick marks #

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

10 Fahrenheit

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

If you like Blazor Bootstrap, give it a star on GitHub!

Blazor RangeInput

Basic usage #

Disabled #

Min and max #

Step #

Decimal values #

Tick marks #

Links

Guides

Community