Blazorise RangeSlider component

RangeSlider lets users choose a start and end value from the same numeric range.

Use <RangeSlider> when users need to define both a minimum and a maximum value, such as a price filter, delivery window, score band, or capacity range. It renders two coordinated handles, keeps the selected interval highlighted, and normalizes the final range for you.

RangeSlider binds to RangeSliderValue<TValue>, giving you strongly typed Start and End values. Common numeric types such as int, double, and decimal are supported. If you only need one value, use Slider instead.

Examples

Basic selection

Bind the selected interval to a RangeSliderValue<int> and show the current values below the slider.
20
70
Selected range: 20 - 70
<Field>
    <RangeSlider TValue="int" @bind-Value="@selectedRange" Min="0" Max="100" Step="1" StartAriaLabel="Minimum value" EndAriaLabel="Maximum value" />
    <FieldHelp>Selected range: @selectedRange.Start - @selectedRange.End</FieldHelp>
</Field>

@code {
    RangeSliderValue<int> selectedRange = new( 20, 70 );
}

Decimal values

Use decimal together with Step for prices, measurements, and other non-integer ranges.
50
175
Price filter: $50.00 - $175.00
<Field>
    <RangeSlider TValue="decimal" @bind-Value="@priceRange" Min="0m" Max="250m" Step="12.5m" StartAriaLabel="Minimum price" EndAriaLabel="Maximum price" />
    <FieldHelp>Price filter: @PriceRangeText</FieldHelp>
</Field>

@code {
    RangeSliderValue<decimal> priceRange = new( 50m, 175m );

    string PriceRangeText => $"${priceRange.Start:0.00} - ${priceRange.End:0.00}";
}

Clamped handles

By default, dragging one handle past the other swaps the logical Start and End values.

Enable ClampToOtherHandle when you want the active handle to stop at the other handle instead.

25
75
Try dragging one handle into the other. Current selection: 25% - 75%
<Field>
    <RangeSlider TValue="int" @bind-Value="@capacityRange" Min="0" Max="100" Step="5" ClampToOtherHandle StartAriaLabel="Minimum capacity" EndAriaLabel="Maximum capacity" />
    <FieldHelp>Try dragging one handle into the other. Current selection: @capacityRange.Start% - @capacityRange.End%</FieldHelp>
</Field>

@code {
    RangeSliderValue<int> capacityRange = new( 25, 75 );
}

Non-overlapping values

Combine ClampToOtherHandle with AllowEqualValues="false" to keep at least one step between the handles.
5
20
Experience filter: 5 to 20 years. Handles keep at least one step between them.
<Field>
    <RangeSlider TValue="int" @bind-Value="@experienceRange" Min="0" Max="30" Step="5" ClampToOtherHandle AllowEqualValues="false" StartAriaLabel="Minimum experience" EndAriaLabel="Maximum experience" />
    <FieldHelp>Experience filter: @experienceRange.Start to @experienceRange.End years. Handles keep at least one step between them.</FieldHelp>
</Field>

@code {
    RangeSliderValue<int> experienceRange = new( 5, 20 );
}

Hidden tooltips

Set ShowValueTooltips="false" when you prefer to show the selected range in surrounding text, filter chips, or field help.
Monthly budget: $1000 - $3000
<Field>
    <RangeSlider TValue="int" @bind-Value="@budgetRange" Min="500" Max="5000" Step="250" ShowValueTooltips="false" StartAriaLabel="Minimum budget" EndAriaLabel="Maximum budget" />
    <FieldHelp>Monthly budget: @BudgetRangeText</FieldHelp>
</Field>

@code {
    RangeSliderValue<int> budgetRange = new( 1000, 3000 );

    string BudgetRangeText => $"${budgetRange.Start} - ${budgetRange.End}";
}

Best Practices

Choose meaningful steps

Match Step to real user decisions. Use small steps for precise adjustments and larger steps for broad filters so the slider stays easy to drag.

Visible Range

Tooltips help during dragging, but persistent labels or field help reduce ambiguity on touch devices and in dense filtering panels.

Crossing Behavior

Keep the default swapping behavior when either handle can freely move across the range. Enable ClampToOtherHandle when users think in fixed minimum and maximum bounds, and add AllowEqualValues="false" when the selected interval must always stay open.

Handle Labels

Use StartAriaLabel and EndAriaLabel when the context is not obvious from the surrounding form so screen reader users can distinguish the two handles.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page