How to fix binding TimeSpan TotalSeconds to Slider.Value Double 'TotalSeconds' property not found on '00:00:00.1117292', target property: 'Microsoft.Maui.Controls.Slider.Value'

Question

Hey,

Im having an issue to bind a sliders value and

maximum value to a mediaplayers duration and position.

As of now the app works fine but in the background it generates 100+ of binding failures. with the text

Binding: 'TotalSeconds' property not found on '00:00:00.1117292', target property: 'Microsoft.Maui.Controls.Slider.Value'

this happens on multiple timespan values

Binding: 'TotalSeconds' property not found on '00:00:20.3897808', target property: 'Microsoft.Maui.Controls.Slider.Value'

My c# code snippet where binding accours:

     public MainPage()
     {
         InitializeComponent();
         Instance = this;
         AudioSlider.BindingContext = MediaPlayer;
         AudioSlider.SetBinding(Slider.ValueProperty, "Position.TotalSeconds", BindingMode.TwoWay);
         AudioSlider.SetBinding(Slider.MaximumProperty, "Duration.TotalSeconds", BindingMode.TwoWay);
         //MediaPlayer.BindingContext = "AudioSlider";
         //MediaPlayer.SetBinding(CommunityToolkit.Maui.Views.MediaElement.PositionProperty,"")
     }
     public bool IsPlaying { get; set; } = false;
     public async Task PlayAudio(string filePath)
     {
         if (File.Exists(filePath))
         {
             // Stop and Reset Before Changing Source
             MediaPlayer.Stop();
             MediaPlayer.Source = null;
             await Task.Delay(100); // Allow time for reset (prevents errors)
             // Now Set the New Source and Play
             MediaPlayer.Source = MediaSource.FromFile(filePath);
             MediaPlayer.Play();
                 
             // Reset Slider
             AudioSlider.Value = 0;
             // Debugging
             DebugLabel.Text = $"Current: {(int)MediaPlayer.Position.TotalSeconds} of {(int)MediaPlayer.Duration.TotalSeconds}";
             IsPlaying = true;
         }
     }

xaml view page :

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:BlazorMaui"
             xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"

             x:Class="BlazorMaui.MainPage">

    <Grid RowDefinitions="* , Auto"> 
          <BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html" Grid.Row="0">
            <BlazorWebView.RootComponents>
                <RootComponent Selector="#app" ComponentType="{x:Type local:Components.Routes}" />

            </BlazorWebView.RootComponents>

        </BlazorWebView>
        <!-- Media Player Positioned at the Bottom -->

        <toolkit:MediaElement x:Name="mediaPlayer"
                                   
                                   ShouldShowPlaybackControls="False"   
                                   MediaEnded="mediaPlayer_MediaEnded"                                    
                                   Grid.Row="1"/>

        <BoxView Grid.Row="2" VerticalOptions="End" Color="DarkSlateGray" HeightRequest="100" Opacity="0.25"/>
        <Slider 
            x:Name="AudioSlider" 
            Grid.Row="2" 
            VerticalOptions="Center" 
            HorizontalOptions="Center" 
            HeightRequest="50" 
            Opacity="0.75"  
            WidthRequest="400" 
            ValueChanged="OnAudioSliderValueChanged"
            Minimum="0"
            />

        <Label 
             x:Name="DebugLabel" 
            Grid.Row="2" 
            VerticalOptions="Center" 
            HorizontalOptions="Center" 
            FontSize="14" 
            Text="{Binding Source=mediaPlayer, Path=Position.TotalSeconds, StringFormat='Current: {0:0} / {1:0}'}"         />           </Grid>  
</ContentPage>

Update,

i switched to a converter class that implemets IValueConveter

using System;
using System.Globalization;
using Microsoft.Maui.Controls;

namespace BlazorMaui
{
    public class TimeSpanToDoubleConverter : IValueConverter
    {
        public object Convert(object? value, Type targetType, object? parameter, CultureInfo culture)
        {
            if (value is TimeSpan timeSpan)
            {
                return timeSpan.TotalSeconds; // Convert TimeSpan to total seconds as a double
            }
            return 0; // Default to 0 if value is null or not a TimeSpan
        }

        public object ConvertBack(object? value, Type targetType, object? parameter, CultureInfo culture)
        {
            if (value is double seconds)
            {
                return TimeSpan.FromSeconds(seconds); // Convert double back to TimeSpan
            }
            return TimeSpan.Zero; // Default to zero if value is null or not a double
        }
    }
}

and still getting Binding: 'Position' property not found on 'CommunityToolkit.Maui.Views.MediaElement', target property: 'Microsoft.Maui.Controls.Slider.Value'

how is it not found? the app works and the position propertity infact do exist. maybe it is not bindable by default?

AudioSlider.SetBinding(Slider.ValueProperty, nameof(MediaElement.Position), BindingMode.TwoWay,timespanToDouble );
AudioSlider.SetBinding(Slider.MaximumProperty, nameof(MediaElement.Duration), BindingMode.TwoWay,timespanToDouble);

when changing the value of nameof() into something else the app works in unexpected way. but this works as expected, so why is the error telling me Binding: 'Position' property not found on 'CommunityToolkit.Maui.Views.MediaElement', target property: 'Microsoft.Maui.Controls.Slider.Value'

and Binding: 'Duration' property not found on 'CommunityToolkit.Maui.Views.MediaElement', target property: 'Microsoft.Maui.Controls.Slider.Maximum'