MAUI: Slider ThumbImageSource is not moving after disabling the slider to select lower time

Sreejith Sreenivasan 896 Reputation points
2024-10-19T12:21:20.81+00:00

Using this and this threads I implemented the slider reduction prevention logic on my MAUI application. My requirement is that after dragging the slider, the user should not be allowed to select a lower value. However, if they choose a higher value, it should be displayed on the UI.

After starting a slider the time will reduce on each second. Now I noticed that the slider tip (ThumbImageSource) is not moving to initial position when time reduces, the tip is constant.

My Codes:

<Slider 
    x:Name="watchme_slider"
    Grid.Column="1"
    BackgroundColor="White"
    MinimumTrackColor="#1c98d7"
    MaximumTrackColor="#9a9a9a"
    ThumbImageSource="ic_thumb_xx.png"
    ValueChanged="SliderValueChanged"
    InputTransparent="{Binding InputTransparent}"
    Maximum="0.166666667"
    Minimum="0"
    HorizontalOptions="FillAndExpand">
    <Slider.Behaviors>
        <toolkit:EventToCommandBehavior
            EventName="DragCompleted"
            Command="{Binding Source={x:Reference page}, Path=BindingContext.DragCompletedCommand}"
            CommandParameter="{Binding Source={x:Reference watchme_slider}}"/>
    </Slider.Behaviors>
</Slider>

SliderValueChanged Event:

public async void SliderValueChanged(object sender, ValueChangedEventArgs args)
{
    try
    {
        if (isWatchMeCanceled)
        {
            watchme_slider.Value = 0;
            advanced_slider.Value = 0;
            await Task.Delay(TimeSpan.FromSeconds(2));
            isWatchMeCanceled = false;
            hpvm.preValue = 0;
        }
        else
        {
            Slider slider = (Slider)sender;
            //double value = slider.Value;
            IsIncrease = args.NewValue > args.OldValue;
            if (!IsIncrease)
            {
                hpvm.InputTransparent = true;
                value = args.OldValue;
                //slider.Value = args.OldValue;
            }
            else
            {
                hpvm.InputTransparent = false;
                slider.Value = args.NewValue;
                value = args.NewValue;
            }
        }
    }
    catch (Exception ex)
    {
        Debug.WriteLine("Exception:>>" + ex);
    }
}

HomePageViewModel:

public double preValue;

public void DragCompleted(object obj)
{
    var slider = obj as Slider;
    if (slider.Value > preValue)
    {
        Debug.WriteLine("do some work");
        preValue = slider.Value;
    }
    else
    {
        Utility.ShowToast("Only time extension is allowed!", ToastDuration.Short, 14);
    }
}

The time prevention logic when choose lower value and time extension logic when choose higher value are working fine. Only problem is with the tip is not moving.

Please view the this video to get a clear idea about the issue.

I have created a sample project and uploaded here.

There is an issue with the demo project. I have added a DragCompleted event for slider but it is not firing in HomePageViewModel. If it fires only the rest of the functionalities will start working.

.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
3,542 questions
0 comments No comments
{count} votes

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.