server side slider component

I have a question about implementation details of a slider component. Let say i have a code like

<div class="form-group"><label for="creditCardDebt" class="main__form-label">Credit Card Debt</label> <span> @ApplyFormModel.Debt.ToString("C") </span> <input type="range" min="0" max="30000" step="1000" id="creditCardDebt" class="form-control" @bind="@ApplyFormModel.Debt" @bind:event="oninput" /></div>

So when using Blazor server side every time i move a slider to another position i see a request to the server. Could it be a potential performance issue? Any best practices on how to implement such use case in a different manner? Thanks!

[mselinger75]

thanks. i have already tried to use OnAfterRenderAsync and it worked just fine even without StateHasChanged call at all

protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender == false) { if (ShowErrors) await JsRuntime.ScrollToElementId(“div-errors”); } }

[yopez83]

my question though - how can i make sure that call to StateHasChanged re-renders component fast enough so by the time JsRuntime.ScrollToElementId executes my errors div already in place?

For more details on the Blazor Components Lifecycle click here. To answer your question, I’d override the OnAfterRenderAsync() and make the call to scroll there. Remember the call to StateHasChanged() should happens in the method you are making a request to the server.