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.

Telerik UI for Blazor Ninja image

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

In This Article

To use a Telerik RangeSlider for Blazor

  1. Add the TelerikRangeSlider tag.
  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 Range Slider 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;
}

The result from the code snippet above

range slider first look

Component namespace and 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>

Features

The Range Slider provides the following features:

  • Class - the CSS class that will be rendered on the main wrapping element of the slider.

  • Decimals - a setting that helps avoid round-off errors when calculating steps (see more about this type of errors here). The slider uses that to determine how many decimals to take and set to the value when calculating the differences between the min and max, and the steps. You can see an example of wrong setup and the issue it can cause below. Here is a simple example of the mathematical operation and how you can see unexpected floating numbers that could, at least to an extent, be avoided if you use high-precision number types such as decimal:

    Math equation: 0.6 / 0.2 
    Output: 2.9999999999999996
    
    Math equation: 0.6 / 0.3
    Output: 2
    
  • Enabled - whether the component is enabled.

  • LabelTemplate - lets you render your own custom labels for the major ticks.

  • LargeStep - defines where the larger (longer) ticks lie - they are rendered on every n-th occurrence of the LargeStep. Required.

    • At least one large tick will be rendered in the beginning of the track, even if LargeStep is larger than the difference between the Min and Max.

    • This is purely a presentation setting and we recommend setting it to a value that matches the range of the slider and the SmallStep for best appearance.

    • To disable the rendering of the large ticks, set the parameter to 0.

  • Max - the maximum value on the slider. Required.

  • Min - the minimum value on the slider. Required. Must be lower than the Max.

  • Orientation - whether the slider will be horizontal (the default) or vertical. Takes a member of the Telerik.Blazor.SliderOrientation enum.

  • SmallStep - 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.

    • We recommend matching the SmallStep with the LargeStep for improved visual appearance (e.g., multiply the SmallStep by the desired whole number and set that to the LargeStep).

    • The slider starts rendering ticks from the Min value and so if the Max does not match a tick, it will not be rendered. For example, if Min=0 and Max=100 but SmallStep=15 the final value that will render will be 90 (four times the small step) and not 100. See an example below.

  • TickPosition - lets you choose where the ticks render. Takes a member of the Telerik.Blazor.SliderTickPosition enum. Defaults to Both. Can be Before, After, Both, None. For example, with the default horizontal slider, these values will render ticks above, below, both above and below, and no ticks.

  • Width - 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.

  • Validation - see the Input Validation article for more details.

  • StartValue and EndValue; and bind-StartValue and bind-EndValue- 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.
  • Events - see the Slider events article for more information and examples.

Examples

This section provides the following examples to showcase some of the slider features and their behavior:

Matching Ticks Steps, Min, Max

You can use a multiplier over the small step to set the large step, and to ensure that this can divide the difference between the min and max. This will provide the best possible appearance where ticks will be distributed evenly and you will be able to use the full range of the slider.

matching ticks

from @TheStartValue to @TheEndValue
<br />
<TelerikRangeSlider @bind-StartValue="@TheStartValue" @bind-EndValue="@TheEndValue"
                    SmallStep="5m" LargeStep="15m" Min="5m" Max="50m">
</TelerikRangeSlider>

@code{
    decimal TheStartValue { get; set; } = 20m;
    decimal TheEndValue { get; set; } = 45m;
}

Not Matching Ticks Steps, Min, Max

In this example, the max value does not match the large step, small step and the min, so the max value is not rendered and the user can only go up to 90 instead of 100. The small and large steps match in this example, however, the only "issue" is the Max value.

non-matching values

from @TheStartValue to @TheEndValue
<br />
<TelerikRangeSlider @bind-StartValue="@TheStartValue" @bind-EndValue="@TheEndValue"
                    SmallStep="15m" LargeStep="30m" Min="0m" Max="100m">
</TelerikRangeSlider>

@code{
    decimal TheStartValue { get; set; } = 20m;
    decimal TheEndValue { get; set; } = 45m;
}

Vertical Slider

This example shows how to make the slider vertical.

from @TheStartValue to @TheEndValue
<br /><br />
<TelerikRangeSlider Orientation="@SliderOrientation.Vertical"
                    @bind-StartValue="@TheStartValue" @bind-EndValue="@TheEndValue"
                    SmallStep="10" LargeStep="20" Min="0" Max="100">
</TelerikRangeSlider>

@code{
    int TheStartValue { get; set; } = 20;
    int TheEndValue { get; set; } = 45;
}

vertical slider

Decimals and Rounding Errors

The first slider in this example has a sufficient precision (Decimals) to properly handle the values that it will have to render in its labels and set in its Value. The second slider does not have sufficient precision - the Decimals value is too low and thus the rounding in the labels texts and of the StartValue and EndValue will be off a little.

To see the difference in how rounding can have issues with insufficient precision, try changing the values from each slider - you will see that the second slider does not respond "correctly" and as expected.

precision issues with wrong Decimals setting

@TheStartValue to @TheEndValue
<br /><br />

@* Sufficient precision for the selected values and steps *@

<TelerikRangeSlider @bind-StartValue="@TheStartValue" @bind-EndValue="@TheEndValue" Decimals="3"
                    SmallStep="0.005m" LargeStep="0.02m" Min="0m" Max="0.1m" Width="500px">
</TelerikRangeSlider>

<br /><br />

@* Insufficient precision for the current values and steps
    the labels texts will be off and the value will not change every time you move the handle
    only when it reaches the threshold of the decimals which default to 2 for invariant and most cultures*@

<TelerikRangeSlider @bind-StartValue="@TheStartValue" @bind-EndValue="@TheEndValue" Decimals="2"
                    SmallStep="0.005m" LargeStep="0.02m" Min="0m" Max="0.1m" Width="500px">
</TelerikRangeSlider>

@code{
    decimal TheStartValue { get; set; } = 0.015m;
    decimal TheEndValue { get; set; } = 0.02m;
}

See Also

In this article
Not finding the help you need? Improve this article