Dynamically change TrackColor

[Karro]

Hello,
in Xamarin I used to change the TrackColor of a SfRangeSlider using Triggers.  How to achieve similar resaults in SfSlider .net MAUI?

<range:SfRangeSlider>
    <range:SfRangeSlider.Triggers>
        <DataTriggerBinding="{Binding Foo}"
                     Value="true"
                     TargetType="range:SfRangeSlider">
            <SetterProperty="TrackColor"
                    Value="Blue"/>
        </DataTrigger>
    </range:SfRangeSlider.Triggers>
</range:SfRangeSlider>

[Nitheeshkumar Thangaraj]

Hi Mohammed,

We have taken your query for validation. We will provide the solution or update the details by January 29, 2024.

Regards,

Nitheeshkumar

[Nanthini Mahalingam]

Hi Mohammed,

Currently, our development team is validating the data triggers updating for SfRangeSlider on our end. We need time to validate it and will update the status within two business days (31/01/2023).

Regards,

Nanthini M.

[Nanthini Mahalingam]

Hi Mohammed,

We can trigger the track color with ActiveFill and InActiveFill property using DataTriggers as shown in the following code snippet.

  <sliders:SfRangeSlider.Triggers>

      <DataTrigger TargetType="sliders:SfRangeSlider" Binding="{Binding Source={x:Reference checkBox},

          Path=IsChecked}" Value="True">

          <Setter Property="TrackStyle">

              <Setter.Value>

                  <sliders:SliderTrackStyle ActiveSize="8"

                            InactiveSize="6"

                            InactiveFill="{Binding Converter={StaticResource IndexToColorConverter}, ConverterParameter={x:Reference slider}}"

                            ActiveFill="#F7B1AE" />

              </Setter.Value>

          </Setter>

      </DataTrigger>

  </sliders:SfRangeSlider.Triggers>

Converter:

public class IndexToColorConverter : IValueConverter

{

 

    public object? Convert(object? value, Type targetType, object? parameter, CultureInfo culture)

    {

      

        if (parameter is Syncfusion.Maui.Sliders.SfRangeSlider slider)

        {

            return Colors.Gray;

        }

        return value;

    }

 

    public object? ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)

    {

        throw new NotImplementedException();

    }

 

 

 

}

When we checked the checkbox, active fill and inactive color updated.

Output:

When we unchecked the check box, active fill and inactive color changed into default state.

Output:

Please let us know if you need further assistance.

Regards

Nanthini M.