Slider Overview

The Blazor Slider component allows the user to select a value by dragging its handle along the track, or by clicking the side arrow buttons. It provides templates, various configuration options, validation and keyboard navigation.

Telerik UI for Blazor Ninja image

The Slider component is part of Telerik UI for Blazor, a professional grade UI library with 80 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 Slider for Blazor

  1. Add the TelerikSlider tag.
  2. Provide the Value (one-way data binding) or bind-Value (two-way data binding) property.
  3. Choose the Min, Max, SmallStep and LargeStep settings to define the appearance and behavior of the slider.

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

@* The user can choose integers with a step of 1 and every 20 there will be a major tick *@

@Volume
<br />
<TelerikSlider @bind-Value="@Volume"
               Min="0"
               Max="100"
               SmallStep="1"
               LargeStep="20"
               Width="400px">
</TelerikSlider>

@code{
    int Volume { get; set; } = 33;
}

The result from the code snippet above

slider first look

Component namespace and reference

The Slider is a generic component that takes the type of the Value which can be e numerical type.

@TheValue
<br />
<TelerikSlider @bind-Value="@TheValue" SmallStep="0.5m" LargeStep="5m" Min="0m" Max="20m" @ref="@TheSlider">
</TelerikSlider>

@code{
    Telerik.Blazor.Components.TelerikSlider<decimal> TheSlider { get; set; }

    decimal TheValue { get; set; } = 12.3m;
}

Features

The 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.

  • ShowButtons - whether there will be increase and decrase buttons at the ends of the slider. Defaults to true.

  • Value and bind-Value- the value of the slider. 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

@TheValue
<br />
<TelerikSlider @bind-Value="@TheValue" SmallStep="5m" LargeStep="15m" Min="5m" Max="50m">
</TelerikSlider>

@code{
    decimal TheValue { get; set; } = 20m;
}

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

@TheValue
<br />
<TelerikSlider @bind-Value="@TheValue" SmallStep="15m" LargeStep="30m" Min="0m" Max="100m">
</TelerikSlider>

@code{
    decimal TheValue { get; set; } = 12.3m;
}

Vertical Slider Without Buttons

This example shows how to make the slider vertical and how to remove the increase/decrease buttons. You can use these settings separately, of course.

@TheValue
<br /><br />
<TelerikSlider Orientation="@SliderOrientation.Vertical" ShowButtons="false"
               @bind-Value="@TheValue" SmallStep="10" LargeStep="20" Min="0" Max="100">
</TelerikSlider>

@code{
    int TheValue { get; set; } = 30;
}

vertical slider without buttons

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 Value 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

@TheValue
<br /><br />

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

<TelerikSlider @bind-Value="@TheValue" Decimals="3"
               SmallStep="0.005m" LargeStep="0.02m" Min="0m" Max="0.1m" Width="500px">
</TelerikSlider>

<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*@

<TelerikSlider @bind-Value="@TheValue" Decimals="2"
               SmallStep="0.005m" LargeStep="0.02m" Min="0m" Max="0.1m" Width="500px">
</TelerikSlider>

@code{
    decimal TheValue { get; set; } = 0.015m;
}

See Also

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