@bind-Value working inconsistently

[Peter]

I must be doing something wrong - but I can't figure it out ...

When a SfSlider is included within a sfDialog Component, I want it to display an initial value.  The way I do this with all other SyncFusion Components is to use @bind-Value="@myVariable".  However, the SfSlider won't show the initial value when first displayed.  This is demonstrated in the supplied project which has a cut down version of my custom Components.  With reference to that project:

In Index.razor.cs:

The initial values I want to have displayed by the SfSlider are set:

     int ACWMax = 20;

     int ACWMin = 5;

     int ACW = 12;

In Index.razor the above variables are assigned to parameters of my UserOptions Component:

<UserOptions Visible ="@UserOptionsVisible" onOptionsSave="OptionsCloseCallback" ACW="@ACW" ACWMin="@ACWMin" ACWMax="@ACWMax"></UserOptions>

In UserOptions.razor the definition of the SfSlider is:

                        <SfSlider TValue="int" Min="@ACWMin" Max="@ACWMax" @bind-Value="@ACW">
                            <SliderTicksData ShowSmallTicks="true" Placement="Placement.After" LargeStep="5" SmallStep="1" Format="# secs"> </SliderTicksData>
                            <SliderTooltipData IsVisible="true" Placement="TooltipPlacement.Before" Format="# secs"></SliderTooltipData>
                        </SfSlider>

When you run the project and click "Open User Options" the ACWMin, ACWMax properties are respected by the SfSlider but the ACW value is not.  Interestingly, there's a SfNumericTextBoxon on the same same SfDialog which is bound in exactly the same way and that works fine.  If the value of the SfNumericTextBox is changed with it's spinner controls the SfSlider will display the current value of @ACW as you would expect.  However, it won't display the value of that variable when first displayed as required.

What am I doing wrong ... or is there something wrong with SfSlider?

Attachment: DialogDesign_e0b40a04.zip

[Sowmiya Padmanaban]

Hi Peter,  

 

Greetings from Syncfusion support. 

 

We have checked your reported problem with Slider component. We would like to let you know that Slider will render all its inner element based on its parent element width when initializing it. Since, you are rendering the Slider as a child component for Dialog component and displaying the dialog only on a button click, dynamically, the parent(Dialog) of the Slider will have no width when initial rendering the Slider, and it will not render its element properly in that case.  

 

To resolve this problem, you need to call the refresh method of Slider component to assign the slider value on Dialog’s open event, because the Dialog will have width once its is opened. So, on calling refresh method of Slider in Dialog’s open event, will detect the width of its parent(Dialog) element and re-render all its inner elements properly. 

 

Refer the below code snippet. 

 

    <SfDialog Width="300px" ShowCloseIcon="true" AllowDragging="true" IsModal="false" @bind-Visible="@optionsVisible"> 

              <DialogEvents Opened="open"></DialogEvents> 

        <DialogTemplates> 

            <Header>User Options</Header> 

            <Content> 

                <SfNumericTextBox Width="100px" TValue="int" @bind-Value="@ACW" Min="@ACWMin" Max="@ACWMax" StrictMode="true" Decimals=0 Placeholder="After Call Work Time (seconds)" FloatLabelType="@FloatLabelType.Always"></SfNumericTextBox> 

                <div class="content-wrapper"> 

                    <div class="sliderwrap"> 

                        <label>After Call Work Time</label> 

                        <SfSlider @ref="slider" TValue="int" Min="@ACWMin" Max="@ACWMax" Value="@ACW"> 

                            <SliderTicksData ShowSmallTicks="true" Placement="Placement.After" LargeStep="5" SmallStep="1" Format="# secs"> </SliderTicksData> 

                            <SliderTooltipData IsVisible="true" Placement="TooltipPlacement.Before" Format="# secs"></SliderTooltipData> 

                        </SfSlider> 

                        </div> 

                    </div> 

</Content> 

        </DialogTemplates> 

        <DialogButtons> 

            <DialogButton Content="Save" IsPrimary="true" OnClick="@onSaveClick" /> 

        </DialogButtons> 

    </SfDialog> 

 

@code{ 

    SfSlider<int> slider; 

    public void open() 

    { 

        this.slider.Refresh(); 

    } 

 

} 

 

Refer the sample link below. 

 

https://www.syncfusion.com/downloads/support/forum/157524/ze/DialogDesign-370987623.zip 

 

And also, you have used both the material and bootstrap two styles in your application. We have removed the styles in your application. 

 

To know more about the Slider component, refer the below links. 

 

UG Documentation	https://blazor.syncfusion.com/documentation/range-slider/orientation
Demo link	https://blazor.syncfusion.com/demos/slider/default/
API reference	https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.Inputs.ISlider_members.html

  

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P 

[Peter]

Sowmiya

Thanks for your prompt reply and clear expectation of what I'm doing wrong.  I'll apply the changes you have recommended next week and will let you know how I get on.

Peter,

[Sowmiya Padmanaban]

Hi Peter,  

  

We will wait to hear from you. 

  

Regards,  

Sowmiya.P 

[Peter]

Sowmiya

Thanks for your clear explanation about what I was doing wrong.  I have applied the changes you recommended and am pleased to report, the SfSlider is now functioning as required.  Thanks for your help.

Peter,

[Peter]

Sowmiya

Further to my last, I just noticed your comment that "And also, you have used both the material and bootstrap two styles in your application. We have removed the styles in your application" and have looked into that.  I confess that I struggle to understand CSS and I guess having two stylesheets unnecessarily loads the application.

The Material stylesheet is referenced by the LoginDialog component.  Are there equivalent CSS classes in the Bootstrap4 stylesheet that I could use so the material stylesheet can be removed?  I'd appreciate your advice on this as it is cerain you will know much more about CSS than me :)

Peter,

[Sowmiya Padmanaban]

Hi Peter,  

 

We have used same selectors to CSS style properties for both material and bootstrap4 themes. For example: In material theme, we set color for .e-slider .e-handle as #e3165b. Similarly, in bootstrap4 theme, we set color #007bff to the same selector. If you refer both themes files in your application, then last referred order theme styles will be applied to SF Components. (If material theme files is first in reference order and bootstrap4 theme file is referred after it, then  bootstrap4 theme will be applied to the SF components). 

 

You can declare the styles for your application in Host.cshtml file. 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P 

[Dietfrid Mali]

With SyncFusion 20.2.0.36:

Error (active) CS1061 'SfSlider' does not contain a definition for 'Refresh' and no accessible extension method 'Refresh' accepting a first argument of type 'SfSlider' could be found (are you missing a using directive or an assembly reference?)

I just downloaded your demo app (from https://www.syncfusion.com/downloads/support/forum/157524/ze/DialogDesign-370987623.zip ) and upgraded its Syncfusion.Blazor package to 20.2.0.36. With that version of Syncfusion.Blazor it doesn't work anymore.

However, the problem of an SfSlider's thumb position not being set properly when the containing dialog is initially rendered is still present.

Who the heck does your QA?

[SureshRajan Alagarsamy]

Hi Dietfrid,

Greetings from Syncfusion Support.

We downloaded and checked the shared sample at our end in the latest version. In our previous shared sample, the 18.2.0.56 version has been used, and we have included a lot of breaking changes in our component. Kindly update to the latest NuGet Packages, which is the 20.2.0.38 version, and instead of using the Refresh method, we suggest you use the RepositionAsync method to update the slider’s thumb position at the initial render of the component.

We have attached the sample for your reference.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/DialogDesign1461573395

Please check the shared details and get back to us if you need any further assistance

Regards,

Suresh.