How to change LargeStep property in the Range Slider when changing the window width
Hi Vince,
Thank you for your patience. We’ve prepared a simple demo-level workaround that shows how you can dynamically change the LargeStep property of the Range Slider when the window width changes.
- The LargeStep value is bound to a variable (SliderLargeStepValue) inside the <SliderTicks> tag.
- A JavaScript helper (resizeHelper.js) listens for window resize events and calls back into Blazor using [JSInvokable].
- The UpdateWidth method updates both the width and the SliderLargeStepValue depending on the current window size.
- Finally, StateHasChanged() forces the UI to re-render so the slider ticks reflect the new step size.
[Home.razor]
|
@page "/"
@using Microsoft.JSInterop @inject IJSRuntime JS
<PageTitle>Range Slider Demo</PageTitle>
<SfSlider TValue="int" Min="0" Max="100" Value="50" Step="1" ShowButtons="true"> <SliderTicks Placement="Placement.After" LargeStep="@SliderLargeStepValue" ShowSmallTicks="true" SmallStep="10"> </SliderTicks> </SfSlider>
<p>Current Window Width: @width px</p> <p>Current LargeStep: @SliderLargeStepValue</p>
@code { private int width; private int SliderLargeStepValue = 5;
private DotNetObjectReference<Home>? _dotNetRef;
protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { _dotNetRef = DotNetObjectReference.Create(this); await JS.InvokeVoidAsync("Interoply.RegisterOnResizeListnerAsync", _dotNetRef); } }
[JSInvokable] public Task UpdateWidth(int w) { width = w; if (width < 600) SliderLargeStepValue = 15; else if (width < 800) SliderLargeStepValue = 10; else SliderLargeStepValue = 5; StateHasChanged(); return Task.CompletedTask; } } |
[resizeHelper.js]
|
window.Interoply = { RegisterOnResizeListnerAsync: function (dotNetHelper) { const handler = () => { dotNetHelper.invokeMethodAsync("UpdateWidth", window.innerWidth); }; handler(); window.addEventListener("resize", handler); } }; |
- When the window width is below 800px, the LargeStep becomes 10.
- When the width is 800px or more, the LargeStep resets to 5.
- You can also extend this logic with more conditions if you want different breakpoints (e.g., <600px → 15, <800px → 10, else → 5).
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1
Gif:
The feature is scheduled to be included by end of January 2026.
Regards,
K N Siddartha.
Hi Vince,
We understand your requirement to dynamically adjust the visible tick marks on the Range Slider component based on window width changes displaying ticks at 0-10-20-30-40-50-60-70-80-90-100 at full width, and 0-20-40-60-80-100 when the window is at 50% width.
The @key attribute is the recommended solution here. It instructs Blazor to treat the component as a new instance whenever the key value changes, ensuring the slider properly reinitializes with the updated tick configuration.
Here's the refined implementation for your scenario:
[Home.razor]
@page "/"
@using Microsoft.JSInterop @inject IJSRuntime JS @using Syncfusion.Blazor.Inputs
<PageTitle>Range Slider Demo</PageTitle>
<SfSlider TValue="int" @key="SliderLargeStepValue" Min="0" Max="100" Value="50" Step="1" ShowButtons="true"> <SliderTicks Placement="Placement.After" LargeStep="@SliderLargeStepValue"ShowSmallTicks="true" SmallStep="10"> </SliderTicks> </SfSlider>
<p>Current Window Width: @width px</p>
<p>Current LargeStep: @SliderLargeStepValue</p>
@code {
private int width;
private int SliderLargeStepValue = 10; private DotNetObjectReference<Home>? _dotNetRef;
protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { _dotNetRef = DotNetObjectReference.Create(this); await JS.InvokeVoidAsync("Interoply.RegisterOnResizeListnerAsync", _dotNetRef); } }
[JSInvokable] public Task UpdateWidth(int w) { width = w; if (width < 600) SliderLargeStepValue = 30; else if (width < 800) SliderLargeStepValue = 20; else SliderLargeStepValue = 10;
StateHasChanged();
return Task.CompletedTask;
}
} |
This implementation should provide the responsive tick behavior you're looking for. The @key directive ensures the component fully re-renders with the new tick spacing as the window size changes.
For your reference we have included the runnable sample with a gif demonstration below:
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp
Gif:
Regards,
K N Siddartha.
