Events

This article showcases the available events in the Telerik Slider component:

• ValueChanged
• OnChange

ValueChanged

The ValueChanged event fires every time the Value parameter changes. This happens when the user:

• clicks on the increase/decrease buttons;
• clicks on the track;
• while dragging the handle;

As of version 2.28.0 of Telerik UI for Blazor, the ValueChanged event fires continuously while the user is dragging the handle to ensure updating the value accordingly and deliver live UX. Thus, the component will re-render multiple times during the dragging process. If you want to avoid that, you can handle the OnChange event instead.

Handle the ValueChanged

@*This example showcases one-way data binding by using Value and ValueChanged*@

@TheValue
<br />
<br />
<TelerikSlider Value="@TheValue" ValueChanged="@( (int v) => ValueChangedHandler(v))"
               SmallStep="5" LargeStep="20" Min="0" Max="100" Width="500px">
</TelerikSlider>

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

    async Task ValueChangedHandler(int v)
    {
        // update the view-model to let the change render
        // if you avoid that, you wil effectively cancel the event
        TheValue = v;

        Console.WriteLine($"The user has now chosen {v}");
    }
}

The event is an EventCallback. It can be synchronous and return void, or asynchronous and return async Task. Do not use async void.

The lambda expression in the handler is required by the framework: https://github.com/aspnet/AspNetCore/issues/12226.

OnChange

The OnChange event represents a user action - confirmation of the current value. It fires when the user:

• clicks on the increase/decrease buttons;
• clicks on the track;
• after the user stops dragging the handle;

If you use two-way binding, the ValueChanged event will fire continuously while the user is dragging the handle. This will result in continuous component re-rendering. If you want to avoid that, use one-way binding and update the value for the view-model in the OnChange event handler.

The OnChange event is a custom event and does not interfere with bindings, so you can use it together with models and forms.

Handle the OnChange event

@* This example showcases one-way data binding and handling the OnChange event to update the view-model.
    If you want to update the value while the user drags the handle, you can additionally use two-way binding or handle the ValueChanged event.*@

@result
<br />
<br />
<TelerikSlider Value="@TheValue" OnChange="@OnChangeHandler"
               SmallStep="5" LargeStep="20" Min="0" Max="100" Width="500px">
</TelerikSlider>

@code{
    string result;

    int TheValue { get; set; } = 30;

    async Task OnChangeHandler(object value)
    {
        // update the view-model to let the change render.
        // if you avoid that, you will effectively cancel the event
        TheValue = (int)value;
        result = $"The user selected: {(int)value}";
    }
}

The event is an EventCallback. It can be synchronous and return void, or asynchronous and return async Task. Do not use async void.

See Also

• Slider Overview