Two Way Binding with SfSlider in child component in Blazor

[Stefan Berger]

Hello,

I've created a component (FactorSliderComponent.razor) with a SfSlider inside. I want to use the MySliderComponent in my Index.razor with Two Way Data Binding.

That doesn't work. If I use a normal <input type="range"> instead of the SfSlider it works.

FactorSliderComponent.razor:

@using Syncfusion.Blazor;

                <SfSlider
                          @bind-Value="this.FactorValue"
                          Type="SliderType.MinRange"
                          ID="mySlider"
                          CssClass="@(Factor.Color)">
                    <SliderEvents TValue="int" OnChange="this.UpdateValue"></SliderEvents>
                </SfSlider>

@code {

    [Parameter]
    public int FactorValue { get; set; }

    [Parameter]
    public Factor Factor { get; set; }

    [Parameter]
    public EventCallback<int> FactorValueChanged { get; set; }

    private async Task UpdateValue()
    {
        await this.FactorValueChanged.InvokeAsync(this.FactorValue);
    }

}

Index.razor

     <FactorSliderComponent @bind-FactorValue="TestEntry.EntryValue" Factor="TestEntry.Factor"></FactorSliderComponent>

     <button type="button" @onclick="ValueOut">Value out</button>

@code{

    public FactorEntry TestEntry { get; set; } = new FactorEntry()

    private void ValueOut()
    {
        Console.WriteLine(TestEntry.EntryValue);
    }

}

EntryValue is an int property of the FactorEntry class.

The UpdateValue method is called, if I slide the SfSlider. But the TestEntry.EntryValue doesn't change.

Everything works, if I use the following range slider instead of the SfSlider:

                <input
                       type="range"
                       @bind-value="this.FactorValue"
                       @bind-value:event="oninput"
                       @onchange="this.UpdateValue" />

What do I have to do, to get this working with the SfSlider?

Greetings

Stefan

[Sowmiya Padmanaban]

Hi Stefan Berger, 

 

Greetings from Syncfusion support. 

 

We have validated your reported problem with Slider component. We are unable to replicate the issue from our end. Slider changed value is reflected in parent component.  

 

Please, refer the below code snippet. 

 

Parent component: 

Current input slider value: @value 

Current Slider value: @slider_value 

<Counter @bind-Data="value" @bind-SliderValue="slider_value"></Counter> 

@code { 

    private string _password; 

    public string value; 

    public int slider_value; 

} 

 

Child component: 

 

Slider component: 

<SfSlider @bind-Value="SliderValue" 

          Type="SliderType.MinRange" 

          ID="mySlider"> 

    <SliderEvents TValue="int" OnChange="change"></SliderEvents> 

</SfSlider> 

 

Input slider : 

<input type="range" 

       @bind-value="Data" 

       @bind-value:event="oninput" 

       @onchange="this.UpdateValue" /> 

 

@code { 

    [Parameter] 

    public string Data { get; set; } 

    [Parameter] 

    public int SliderValue { get; set; } 

    [Parameter] 

    public EventCallback<string> DataChanged { get; set; } 

    [Parameter] 

    public EventCallback<int> SliderValueChanged { get; set; } 

 

    private async Task UpdateValue() 

    { 

        await this.DataChanged.InvokeAsync(this.Data); 

    } 

    private async Task change(Syncfusion.Blazor.Inputs.SliderChangeEventArgs<int> args) 

    { 

        SliderValue = args.Value; 

        await this.SliderValueChanged.InvokeAsync(SliderValue); 

    } 

} 

 

Please, refer the below screenshot. 

 

 

 

Please, refer the sample link. 

 

https://www.syncfusion.com/downloads/support/forum/160914/ze/Slider1189546672.zip 

 

If the issue still persists, please replicate the issue in attached sample. It will help us to give the prompt solution. 

 

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

 

Regards,  

Sowmiya.P 

[Stefan Berger]

Thanks a lot - that helped me to solve my problem.

I hadn't done SliderValue = args.Value;

 

You're the best support I can imagine. I wish you all the best

[Sowmiya Padmanaban]

Hi Stefan,  

  

We are happy to hear that your problem has been resolved. Please contact us, if you need any help from us. 

  

Regards,  

Sowmiya.P 

[Stefan Berger]

Hi,

it seems, that if you change the value that is bound to the SfSlider, the slider doesn't slide to that value.

------------------------------------------------------------

Test-Value: @TestValue
<br />
Test-String: @TestString

<SfSlider @bind-Value="this.TestValue"
          Type="SliderType.MinRange">
</SfSlider> @*Doesn't work*@

<br />

<input type="range" @bind-value="TestValue" min="1" max="100" /> @*Works*@

<SfTextBox @bind-Value="@TestString"></SfTextBox> @*Works*@

<button @onclick="()=> { this.TestValue = 0; }">Set to 0</button>
<button @onclick="()=> { this.TestString = emptyString; }">Empty Text</button>

@code {
    public int TestValue { get; set; }
    public string TestString { get; set; }
    private string emptyString = "";
}

---------------------------------------------------

When I change the TestValue, the input type="range" slides.

When I change the TestString, the SfTextBox changes it's text.

But the SfSlider doesn't react to changes of the TestValue.

Am I doing something wrong, or isn't the SfSlider able to do this?

Greetings

Stefan

[Sowmiya Padmanaban]

Hi Stefan Berger,  

 

We have checked your reported problem with Slider component.  We are able to replicate the issue in the package version 18.4.30. But, this issue has been resolved in our latest Syncfsuion.Blazor package. So, we suggest you to update the package to the latest version (18.4.0.33). 

 

Please, refer to the sample link. 

 

https://www.syncfusion.com/downloads/support/forum/160914/ze/Slider2144298939.zip 

 

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

 

Regards,  

Sowmiya.P