MAUI: Slider header is not moving

Question

I have a slider in my UI and I am not able to move it properly.

Below is the code:

<Slider 
    x:Name="watchme_slider"
    Grid.Column="1"
    BackgroundColor="White"
    MinimumTrackColor="#1c98d7"
    MaximumTrackColor="#9a9a9a"
    ThumbImageSource="ic_thumb_xx.png"
    ValueChanged="SliderValueChanged"
    Maximum="0.166666667"
    Minimum="0"
    HorizontalOptions="FillAndExpand"/>

This slider is on a ContentView and below is the full xaml code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentView
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
    xmlns:d="http://xamarin.com/schemas/2014/forms/design"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    NavigationPage.HasNavigationBar="false"
    BackgroundColor="White"
    x:Class="MyProjectName.Pages.HomePage">

    <StackLayout 
        Orientation="Vertical">
        <ScrollView>
            <StackLayout>
                <Frame 
                    BorderColor="#ffffff"
                    BackgroundColor="#ededed"
                    Margin="10,10,10,5"
                    HasShadow="False"
                    CornerRadius="10"
                    Padding="5">

                    <StackLayout
                        Margin="5"
                        Orientation="Vertical">

                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="0.5*" />
                                <ColumnDefinition Width="9.5*" />
                            </Grid.ColumnDefinitions>

                            <Label 
                                x:Name="slider_timer_label"
                                Grid.Column="1"
                                Text=" "
                                Margin="0,0,0,5"
                                Padding="3"
                                HorizontalOptions="Start" 
                                HorizontalTextAlignment="Center" 
                                VerticalOptions="EndAndExpand"
                                TextColor="#ededed">
                                <Label.FontSize>
                                    <OnIdiom x:TypeArguments="x:Double">
                                        <OnIdiom.Phone>12</OnIdiom.Phone>
                                        <OnIdiom.Tablet>18</OnIdiom.Tablet>
                                        <OnIdiom.Desktop>12</OnIdiom.Desktop>
                                    </OnIdiom>
                                </Label.FontSize>
                            </Label>
                        </Grid>

                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="1*" />
                                <ColumnDefinition Width="9*" />
                            </Grid.ColumnDefinitions>

                            <Label 
                                Margin="5"
                                HorizontalTextAlignment="End"
                                Grid.Column="0"
                                Text="0"
                                TextColor="Black">
                                <Label.FontSize>
                                    <OnIdiom x:TypeArguments="x:Double">
                                        <OnIdiom.Phone>16</OnIdiom.Phone>
                                        <OnIdiom.Tablet>24</OnIdiom.Tablet>
                                        <OnIdiom.Desktop>16</OnIdiom.Desktop>
                                    </OnIdiom>
                                </Label.FontSize>
                            </Label>

                            <Slider 
                                x:Name="watchme_slider"
                                Grid.Column="1"
                                BackgroundColor="White"
                                MinimumTrackColor="#1c98d7"
                                MaximumTrackColor="#9a9a9a"
                                ThumbImageSource="ic_thumb_xx.png"
                                ValueChanged="SliderValueChanged"
                                Maximum="0.166666667"
                                Minimum="0"
                                HorizontalOptions="FillAndExpand"/>
                        </Grid>

                        <Label 
                            x:Name="watchme_timer_label"
                            Margin="5,10,5,10"
                            Text=" "
                            HorizontalTextAlignment="Center"
                            HorizontalOptions="CenterAndExpand"
                            TextColor="#ededed">
                            <Label.FontSize>
                                <OnIdiom x:TypeArguments="x:Double">
                                    <OnIdiom.Phone>16</OnIdiom.Phone>
                                    <OnIdiom.Tablet>24</OnIdiom.Tablet>
                                    <OnIdiom.Desktop>16</OnIdiom.Desktop>
                                </OnIdiom>
                            </Label.FontSize>
                        </Label>
                    </StackLayout>
                </Frame>
            </StackLayout>
        </ScrollView>
    </StackLayout>
</ContentView>      

I tried the slider on a demo project and it is working fine on it. I think the issue may be due to the parent layout of my UI. I have uploaded a demo project here for reproducing this issue.

Answer 1

Hello,

From CarouselView document

By default, CarouselView will display its items in a horizontal orientation. A single item will be displayed on screen, with swipe gestures resulting in forwards and backwards navigation through the collection of items.

This issue is related to the scroll event conflict. When you scroll the Slide, your scroll event will be captured by the CarouselView 's swipe gestures.

You can set IsSwipeEnabled="False" for your CarouselView, your Slider could be scrolled normally. If you need to switch other items in the CarouselView, you can use carouselView.ScrollTo(); to do it.

<CarouselView 
x:Name="carouselView"
 IsSwipeEnabled="False"
Loop="False">

By the way, if you do not want to set IsSwipeEnabled="False", you can use increase and decrease buttons to replace the slider.

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.