MAUI slider with a tooltip implementation

Question

I'm trying to implement a slider with a tooltip showing current value. The idea is to make something like a HTML + JS with a value bubble (https://css-tricks.com/value-bubbles-for-range-inputs/). Both ideas I've come with so far are not ideal.

XAML

<Slider
        x:Name="slider1"
        Value="0"
        Maximum="100"
        Minimum="0"
        ValueChanged ="slider1_ValueChanged"                
        />

<Label
        x:Name="labelPositionBubble"
        BindingContext="{x:Reference slider1}"
        Text="{Binding Value}"
        IsVisible="false"
        />

C# code

private async void slider1_ValueChanged(object sender, ValueChangedEventArgs e)
{
    var slider = sender as Slider;

        // Idea 1
        labelPositionBubble.TranslationX += (e.NewValue - e.OldValue) * (slider.Width / slider.Maximum);
 
        // Idea 2
        labelPositionBubble.TranslateTo(slider.Value * (slider.Width / slider.Maximum), labelPositionBubble.Y + 20, 10);
}

I've tried calculating the translation (see 'Idea 1') and using TranslateTo() method (see 'Idea 2').

https://www.youtube.com/shorts/E0hEDXv1JUE

First works relatively smooth but is imprecise. Label isn't perfectly aligned with a slider's thumb and moves ahead / lags behind slightly. (Is there a mistake in my formula?)

https://www.youtube.com/shorts/Zcx4PCpn0K8

Second method works better in terms of precision, but UX is way worse: label tends to move with a noticeable jerk (since TranslateTo() is a method for animation, I guess).

Solution

labelPositionBubble.TranslationX = 16 + slider.Value * ((slider.Width - 32) / slider.Maximum) - labelPositionBubble.Width / 2;

labelPositionBubble.TranslationY = -20;

labelPositionBubble.Width / 2 centers the label.

TranslationY = -20; positions the label above the slider, use positive values to position below.