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
The LargeStep defines where the larger (longer) ticks lie - they are rendered on every n-th occurrence of the LargeStep.
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.
SmallStep
The 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.
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.
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;
}