Blazor RangeSlider Overview

The Blazor Range Slider component allows the user to select a value range by dragging its handles along the track. It provides templates, various configuration options, validation and keyboard navigation.

The RangeSlider component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

Creating RangeSlider

1. Use the TelerikRangeSlider tag to add the component to your razor page.

2. Provide the StartValue and EndValue (one-way data binding) or bind-StartValue bind-EndValue (two-way data binding).

3. Choose the Min, Max, SmallStep and LargeStep settings to define the appearance and behavior of the slider.

Basic setup of the Telerik RangeSlider using two-way data binding

@* The user can choose decimal values range with a step of 5 and every 20 there will be a major tick. The label template is also used to add a currency symbol *@

The user wants products between @MinPrice.ToString("C2") and @MaxPrice.ToString("C2")
<br /><br />

<TelerikRangeSlider @bind-StartValue="@MinPrice"
                    @bind-EndValue="@MaxPrice"
                    Min="@LowestPrice"
                    Max="@HighestPrice"
                    SmallStep="5m"
                    LargeStep="20m"
                    Width="550px">
    <LabelTemplate>
        @context.ToString("C2")
    </LabelTemplate>
</TelerikRangeSlider>

@code {
    decimal MinPrice { get; set; } = 20m;
    decimal MaxPrice { get; set; } = 75m;
    decimal LowestPrice { get; set; } = 10m;
    decimal HighestPrice { get; set; } = 150m;
}

Component Reference

The RangeSlider is a generic component that takes the type of the StartValue which can be a numerical type and is the same as the type of the EndValue.

@code {
    TelerikRangeSlider<decimal> TheRangeSlider { get; set; }

    decimal MinPrice { get; set; } = 20m;
    decimal MaxPrice { get; set; } = 75m;
    decimal LowestPrice { get; set; } = 10m;
    decimal HighestPrice { get; set; } = 150m;
}

<TelerikRangeSlider @bind-StartValue="@MinPrice"
                    @bind-EndValue="@MaxPrice"
                    @ref="@TheRangeSlider"
                    Min="@LowestPrice"
                    Max="@HighestPrice"
                    SmallStep="5m"
                    LargeStep="20m">
</TelerikRangeSlider>

Steps

The RangeSlider works with small and large steps and they are both required. Read more for their configuration and explore examples in the Steps article.

Ticks Position

The RangeSlider lets you choose where its ticks will render. You can control that through the TickPosition parameter. It takes a member of the Telerik.Blazor.SliderTickPosition enum. Can be Before, After, Both(the default), None. For example, with the default horizontal slider, these values will render ticks above, below, both above and below, and no ticks.

Orientation

You can customize the default horizontal orientation of the RangeSlider through its Orientation parameter. Takes a member of the Telerik.Blazor.SliderOrientation enum which contains Horizontal(the default) and Vertical options.

Decimals

This setting helps avoid round-off errors when calculating steps (see more about this type of errors here). Explore the Decimals article for details on how to configure this option.

Validation

You can validate RangeSlider value using the built-in validation. See the Input Validation article for more details.

Parameters

The RangeSlider provides various parameters that allow you to configure the component:

Parameter	Type	Description
Decimals	int	Specifies the number precision for the steps.
Enabled	bool	whether the component is enabled.
LabelTemplate	RenderFragment<TValue>	lets you render your own custom labels for the major ticks.
LargeStep	TValue	defines where the larger (longer) ticks lie - they are rendered on every n-th occurrence of the LargeStep. Required.
Max	TValue	the maximum value on the slider. Required.
Min	TValue	the minimum value on the slider. Required. Must be lower than the Max.
SmallStep	TValue	defines the step through which the slider Value is changed when the user drags the handle. Also defines where small ticks appear on the track to indicate a value that can be selected. Required.
Orientation	SliderOrientation (Horizontal)	whether the slider will be horizontal (the default) or vertical.
TickPosition	SliderTickPosition (Both)	controls the position of the ticks.
StartValue and EndValue; and bind-StartValue and bind-EndValue	TValue	the lower and higher values of the slider that mark the range. Can be a numerical type (such as int, decimal, double and so on). When the user moves the drag handle of the slider, it changes with the SmallStep, but you can set a value programmatically that will land the handle between the ticks and between those steps.

Styling and Appearance

The following parameters enable you to customize the appearance of the Blazor Slider:

Parameter	Type	Description
Class	string	the CSS class that will be rendered on the main wrapping element of the slider.
Width	stirng	the width of the main element. In case you would like it to fit to a container you could set it to 100% or other percent value depending on the application needs. You can read more in the Dimensions article.

Next Steps

• RangeSlider Steps

See Also

• Live Demo: RangeSlider
• Live Demo: RangeSlider Settings
• RangeSlider Events