1. Home
  2. Forum
  3. Blazor
  4. Several render problems with Range Slider inside SfTab component

Several render problems with Range Slider inside SfTab component

Hallo,

In my Blazor web app I have implemented a Sidebar within the MainLayout as explained by Syncfusion.

Using the Sidebar I can open a Razor page with a Tab component and several components in the TabItem (SfDropDownList, SfTextBox, SfNumericTextBox and SfSlider). All the components work as aspected but the Range Slider does not. It renders incorrectly (see the examples in my attachment). Problem1.jpg in my attachment shows the Range Slider after manually changing the size of the page. Problem2.jpg shows the Range Slider when I clicked 50 on the slider while it incorrectly shows 35 as the starting point. Also when selecting a range of the slider the Sidebar disappears. I have to click the toggle button on the Navigation Menu to show the Sidebar again.

. 


Attachment: Problem2_fb3e4af2.7z

11 Replies
LD LeoLavanya Dhanaraj Syncfusion Team March 21, 2025 03:02 AM UTC

Hi Vince,


Greetings from Syncfusion support.


Issue 1 : Range Slider alignment issue when page is resized:


We would like to clarify whether you are facing an issue with the overall misalignment of the Slider component in the Sidebar content area or with the position of the Slider handle when the page is resized, or whether the issue occurs during the Sidebar's opening or closing events. Could you please provide more details about the specific issue?


Additionally, we want to inform you that when the Range Slider is rendered within a container and the page is resized, the available space in the parent container may not be compatible with the Slider component, which could be the cause of the issue. To address these kinds of scenarios, we have a RepositionAsync method that can be invoked in the necessary places to reposition the handle.


Issue 2 : Range Slider when I clicked 50 on the slider while it incorrectly shows 35 as the starting point:


According to your application structure, we have prepared a sample, validated the issue, and are able to reproduce it on our end. We have considered the reported scenario, "Unable to select a range in the Blazor Range Slider component" as a bug on our end. The fix for this issue will be included in our weekly patch release, which is scheduled for April 8, 2025. You can track the status of the fix through the following link.


https://www.syncfusion.com/feedback/66408/unable-to-select-a-range-in-the-blazor-range-slider-component


Issue 3 : When selecting a range of the slider the Sidebar disappears:


We suspect the cause of closing of Sidebar is due to the gestures in the Sidebar component. By default, when we click and drag on the Sidebar main content area(Slider handle dragging), it will trigger Close event of the sidebar. To overcome the reported issue, we suggested to enable this EnableGestures property and set the value to false. Refer the below mentioned code snippets.


<SfSidebar @attributes="@HtmlAttribute" Width="290px" Target=".e-main-content" @bind-IsOpen="SidebarToggle" EnableGestures="false">

    <ChildContent>

        <div class="main-menu">

            …

        </div>

    </ChildContent>

</SfSidebar>


Refer the shared details and get back to us if you need any further assistance.


Regards,

Leo Lavanya Dhanaraj


VI Vince March 21, 2025 09:46 AM UTC

Hallo Leo Lavanya Dhanaraj,

Thanks for your reply.

Issue 1 : Range Slider alignment issue when page is resized:

The issue occurs when the page is resized (not during the Sidebar's opening or closing events).

I don't understand how to implement RepositionAsync in the Tab component while it has no Opened event as mentioned in this example.


Issue 3 : When selecting a range of the slider the Sidebar disappears:

This issue is solved after implementing EnableGestures="false" in the Sidebar.


Best regatds,

Vince




LD LeoLavanya Dhanaraj Syncfusion Team March 26, 2025 05:19 PM UTC

Hi Vince,


Thanks for your patienece.


Issue 1 : Range Slider alignment issue when page is resized:


Based on the provided details, we have prepared a sample and validated the mentioned issue (slider component misalignment during page resize). However, we were unable to replicate the issue. We have included the sample along with video footage for your reference. Additionally, we have shared code snippets that demonstrate the use of the RepositionAsync method, which is called inside the Sidebar OnOpen and OnClose events.


Check out the code snippets below for your reference.


[Home.razor]

@using BlazorAppTreeview.Data;

@inject SliderService RangeSliderService

 

<div class="parentContainer">

<SfTab @ref="TabInstances">

    <TabEvents></TabEvents>

    <TabItems>

        <TabItem>

            <HeaderTemplate>Login</HeaderTemplate>

            <ContentTemplate>

                <div class="parentContainer">

                    <SfSlider @ref="sliderInstances" Min="10" Max="90" Step="5" Type=SliderType.Range Value="@RangeValue" >

                    <SliderTicks Placement="Placement.Both" ShowSmallTicks="true" LargeStep="20" SmallStep="5"></SliderTicks>

                    </SfSlider>

                </div>

            </ContentTemplate>

        </TabItem>

        …

    </TabItems>

</SfTab>

</div>

 

@code {

    public SfSlider<int[]> sliderInstances;

    public SfTab TabInstances;

    public int[] RangeValue = { 30, 70 };

    protected async override void OnInitialized()

    {

        RangeSliderService.SliderInstance = sliderInstances;

    }

}

 

[MainLayout.razor]

@using BlazorAppTreeview.Data;

@inject SliderService RangeSliderService

<div class="page">

    <div id="wrapper">

        <div>

            <SfToolbar>

                <ToolbarEvents Clicked="@Toggle"></ToolbarEvents>

                …

            </SfToolbar>

        </div>

        <SfSidebar @attributes="@HtmlAttribute" Width="290px" Target=".e-main-content" MediaQuery="(min-width:600px)" @bind-IsOpen="SidebarToggle" EnableGestures="false" OnOpen="OnOpen" OnClose="OnClose">

            …

        </SfSidebar>

       …

    </div>

</div>

@code {

    …

    public async Task OnOpen()

    {

        if (RangeSliderService.SliderInstance != null)

        {

            await RangeSliderService.SliderInstance.RepositionAsync();

        }

    }

    public async Task OnClose()

    {

        if (RangeSliderService.SliderInstance != null)

        {

            await RangeSliderService.SliderInstance.RepositionAsync();

        }

    }

}

 

[SliderService.cs]

using Syncfusion.Blazor.Inputs;

namespace BlazorAppTreeview.Data

{

    public class SliderService

    {

        public SfSlider<int[]> SliderInstance { get; set; }

    }

}


Refer the shared details and sample on your end. If you are still facing any issues, kindly provide a sample that replicates the issue along with the steps to reproduce it(if possible, share issue video footage). This information will assist us in validating the problem and delivering a prompt solution.


Regards,

Leo Lavanya Dhanaraj


Attachment: SidebarAndSlider_95c37b31.zip

VI Vince March 27, 2025 11:19 AM UTC

Hallo,

I tried to implement your code adjustments but receiving the next error:


An unhandled exception occurred while processing the request.

InvalidOperationException: Cannot provide a value for property 'SliderService' on type 'BlazorWebApp1.Components.Layout.MainLayout'. There is no registered service of type 'BlazorWebApp1.Services.SliderService'

In my MainLayout.razor file I added "@inject Services.SliderService SliderService" and "@using BlazorWebApp1.Services".


My SliderService.cs file looks like:


using Syncfusion.Blazor.Inputs;

namespace BlazorWebApp1.Services
{
    public class SliderService
    {
        public SfSlider<int[]> SliderInstance { get; set; }
    }
}

When trying to run your attachment "SidebarAndSlider_95c37b31.zip" I receive an error (see my attachment error.zip).


Attachment: Error1_83ae594b.zip

VI Vince March 27, 2025 03:50 PM UTC

Hallo,

I found the problem with the InvalidOperationException in MainLayout.razor. This was caused by missing the code line "builder.Services.AddScoped<SliderService>();" in file Program.cs.

Best regards,

Vince. 


LD LeoLavanya Dhanaraj Syncfusion Team March 28, 2025 07:20 AM UTC

Glad to know your issue has been resolved. Please get back to us for assistance in the future.


LD LeoLavanya Dhanaraj Syncfusion Team April 16, 2025 03:16 AM UTC

Hi Vince,


Thanks for your patience.


We are glad to announce that our patch release (V29.1.38) has been rolled out successfully.  The issue where “Unable to select a range in the Blazor Range Slider component” has been resolved in this release.


To access this fix, we suggest you update the package to 29.1.38 and we include the sample in the latest version for your reference.


Sample : Attached as a zip file.


Feedback : https://www.syncfusion.com/feedback/66408/unable-to-select-a-range-in-the-blazor-range-slider-component


Release notes: https://blazor.syncfusion.com/documentation/release-notes/29.1.38?type=all#slider


Root cause : The reported issue occurs due to while performing click handler the slider's isDragRange flag get true and due to that the click handler exists with return statement which execute while the isDragRange is set to true.


Attachment: Slider_8966cab2.zip

VI Vince April 16, 2025 09:08 AM UTC

Thanks for the reply.

I'm still facing a problem which the RangeSlider after resizing the page. The RangeSlider renders correct when resizing the page. But when I toggle the Navigation Menu after that, a render problem occurs with the selected range of the RangeSlider. When I toggle the Navigation Menu the SfSidebar on the left op the page inside MainLayout.razor disappears. This renders the RangeSlider again due to the extra space on the screen. Unfortunetly the selected range of the RangeSlider does not render but stays unchanged so it shows then incorrect values (see my attachment).


Attachment: Faulty_selected_range_b9352799.zip

SD Saranya Dhayalan Syncfusion Team April 21, 2025 05:21 AM UTC

Hi Vince,


We have validated your query and confirmed that the RangeSlider handle does not refresh correctly when toggling the menu. Please note that the Range Slider can be rendered inside any container, and the component does not inherently track its parent element.

To address such scenarios, we provide the RepositionAsync method, which can be called as needed to update the slider’s position. You can invoke RepositionAsync after toggling the menu to ensure the handle is repositioned correctly.


To assist us in identifying the issue and providing a more accurate solution, we kindly request additional details regarding the problem:

  • Does the issue persist when using the latest version?
  • Please share the code snippet. This will help us better understand how you’re integrating and handling the component in your project.
  • Steps to replicate the issue.
  • A video illustration of the issue.


Regards,

Saranya D


VI Vince April 22, 2025 10:59 AM UTC

Hallo,

I found the cause of the render problem. In your sample you have the code line "@rendermode InteractiveServer" in the page. After adding that in my page the render problem was solved.

Our application has to run client side using Client-side rendering (CSR). Is that possible with your RangeSlider component?


 


KN Kundurthi Naga Siddartha Kundurthi Vennela Prasad Syncfusion Team April 23, 2025 01:22 PM UTC

Hi Vince,


Yes, the Syncfusion Blazor RangeSlider component can run in client-side rendering (CSR) mode. Our Blazor components, including the RangeSlider, are designed to work seamlessly with different rendering modes in .NET 8, specifically:

  • Interactive WebAssembly (client-side rendering)
  • Interactive Server
  • Auto (both server and WebAssembly)

The RangeSlider component fully supports client-side rendering through the RenderModeWebAssembly mode, allowing you to run the component entirely in the browser using WebAssembly.

Also, we have attached a runnable sample for reference.


Regards,

K N Siddartha.



Attachment: BlazorApp2_39f7d0f1.zip

Loader.
Up arrow icon