Forms

TwRangeSlider

TwRangeSlider is a Blazor range slider with two handles for choosing a minimum and maximum value. Bind LowerValue and UpperValue and set Min, Max and Step.

Last updated 23 October 2026

Please be aware this component is new, may have bugs and/or be subject to change. Please report any bugs at https://github.com/twblazor/twblazor/issues.

Basic usage

Bind LowerValue and UpperValue to pick a range between Min and Max. The handles cannot pass each other.

Price

From $200 to $750

RAZOR

<TwRangeSlider T="int" Id="price-range-slider" Min="0" Max="1000" Step="10" Label="Price" @bind-LowerValue="lowPrice" @bind-UpperValue="highPrice" />
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">From <strong>@($"${lowPrice}")</strong> to <strong>@($"${highPrice}")</strong></p>

CSHARP

@code {
    private int lowPrice = 200;
    private int highPrice = 750;
}

Colors

Use Color to tint the filled range between the handles.

Comfortable temperature

19°C to 23°C

Alert band

Alert between 20% and 80%

RAZOR

<div class="space-y-6">
    <div>
        <TwRangeSlider T="int" Id="comfort-range-slider" Min="10" Max="30" Step="1" Label="Comfortable temperature" Color="Color.Success" @bind-LowerValue="comfortLow" @bind-UpperValue="comfortHigh" />
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">@comfortLow&deg;C to @comfortHigh&deg;C</p>
    </div>

    <div>
        <TwRangeSlider T="int" Id="alert-range-slider" Min="0" Max="100" Step="1" Label="Alert band" Color="Color.Danger" @bind-LowerValue="alertLow" @bind-UpperValue="alertHigh" />
        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Alert between @alertLow% and @alertHigh%</p>
    </div>
</div>

CSHARP

@code {
    private int comfortLow = 19;
    private int comfortHigh = 23;
    private int alertLow = 20;
    private int alertHigh = 80;
}

Minimum distance

Set MinDistance to keep a gap between the handles. Here a booking must be at least two hours long.

Booking hours

10:00 to 14:00 (4 hours)

RAZOR

<TwRangeSlider T="int" Id="booking-range-slider" Min="8" Max="20" Step="1" MinDistance="2" Label="Booking hours" Color="Color.Accent" @bind-LowerValue="bookingStart" @bind-UpperValue="bookingEnd" />
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">@bookingStart:00 to @bookingEnd:00 (@(bookingEnd - bookingStart) hours)</p>

CSHARP

@code {
    private int bookingStart = 10;
    private int bookingEnd = 14;
}

Precision

Any numeric type works through T. Use decimal or double with a fractional Step for fine control.

Rating

Rated 3.5 to 5.0

RAZOR

<TwRangeSlider T="decimal" Id="rating-range-slider" Min="0m" Max="5m" Step="0.5m" Label="Rating" @bind-LowerValue="ratingLow" @bind-UpperValue="ratingHigh" />
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Rated <strong>@ratingLow.ToString("0.0")</strong> to <strong>@ratingHigh.ToString("0.0")</strong></p>

CSHARP

@code {
    private decimal ratingLow = 3.5m;
    private decimal ratingHigh = 5m;
}

Disabled & readonly

Disabled dims and locks both handles; ReadOnly keeps the color but blocks changes.

Disabled

Readonly

RAZOR

<div class="space-y-6">
    <TwRangeSlider T="int" Id="disabled-range-slider" Min="0" Max="100" Step="1" Label="Disabled" @bind-LowerValue="disabledLow" @bind-UpperValue="disabledHigh" Disabled />
    <TwRangeSlider T="int" Id="readonly-range-slider" Min="0" Max="100" Step="1" Label="Readonly" Color="Color.Danger" @bind-LowerValue="readonlyLow" @bind-UpperValue="readonlyHigh" ReadOnly />
</div>

CSHARP

@code {
    private int disabledLow = 25;
    private int disabledHigh = 60;
    private int readonlyLow = 30;
    private int readonlyHigh = 70;
}

Each handle is a native range input named Minimum or Maximum, inside a group named by the label. A handle stops when it reaches the other one. A read-only range slider can be focused but its values cannot be changed.

Key	What it does
`Tab` or `Shift` plus `Tab`	Moves focus to the minimum handle, then to the maximum handle.
`Arrow Right` or `Arrow Up`	Increases the focused handle's value by one step.
`Arrow Left` or `Arrow Down`	Decreases the focused handle's value by one step.
`Home` or `End`	Moves the focused handle as far as it can go.
`Pg.Up` or `Pg.Down`	Changes the focused handle's value by a larger amount.

Theme configuration

Styling is controlled by TwBlazorTheme.Components (a TwRangeSliderTheme), configured via the AddTwBlazor() options callback described on the Get Started page. Every property is a set of Tailwind classes, so changes are picked up by your own Tailwind build.

Property	Type	Controls
`Handle`	string
`Base`	string
`Fill`	string

Full reference: TwRangeSliderTheme on the API docs.

TwRangeSlider

Basic usage

Colors

Minimum distance

Precision

Disabled & readonly

Keyboard navigation

Theme configuration