Skip to content

Latest commit

 

History

History
65 lines (44 loc) · 1.72 KB

steps.md

File metadata and controls

65 lines (44 loc) · 1.72 KB
title page_title description slug tags published position
Steps
Slider - Steps
Small and Large Steps in the Slider for Blazor.
slider-steps
telerik,blazor,slider,small,large,step
true
5

Steps

The Slider for Blazor requires values for its large and small steps. You can control them through the corresponding parameters.

In this article:

LargeStep

@template

SmallStep

@template

Examples

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.

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

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

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