Setting SfSlider control Value at page load

[Jim Young]

My Blazor page has an SfSlider and I need to set its Value property to a setting that is stored. I have the Value property bound to a local variable. I have tried setting this value in OnInitializeAsync() and OnAfterRenderAsync but nothing seems to work. Once the page is fully loaded and visible, changing the position of the slider does change the value of the variable that the Value property is bound to.

How can I set this property when the page is for

[Sharon Sanchez Selvaraj]

Hi Jim, 

 

Greetings from Syncfusion support. 

 

We understand that you are facing few binding issues in Range Slider while mapping the value from OnInitialized or OnAfterRender method. We would like to mention that we have two-way binding support in Range Slider, where you can use the bind-Value property to achieve the mentioned scenario. 

 

Refer to the following code: 

 

Index.razor 

    <SfSlider @bind-Value="@Value" 

                          Min="@Min" 

                          Max="@Max" 

                          Step="@Step" 

                          Type="@SliderType.MinRange" 

                          TValue="int"> 

                    <SliderTicksData Placement="@Placement.After" LargeStep="20" SmallStep="5" ShowSmallTicks="true"></SliderTicksData> 

 

                </SfSlider>

                         <div> 

                                <SfNumericTextBox @bind-Value="@Value"> 

                                </SfNumericTextBox> 

                            </div> 

 

We have attached a sample for your reference: 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Slider_Sample-987945323 

 

UG link: https://blazor.syncfusion.com/documentation/range-slider/how-to/validate 

 

Please check with the above sample and let us know if you have any concerns. 

 

Regards, 

Sharon Sanchez S.