MAUI: How to increase the slider height

Sreejith Sreenivasan 961 Reputation points
2025-03-06T15:44:01.99+00:00

I have a slider like below:

<Slider 
    x:Name="audioSlider" 
    Grid.Row="0"
    Minimum="0" 
    VerticalOptions="Center"
    HorizontalOptions="Fill" 
    ThumbColor="Transparent" 
    MaximumTrackColor="Gray" 
    MinimumTrackColor="White" 
    InputTransparent="True"
    Maximum="{Binding Source={x:Reference MymediaElement}, Path=Duration.TotalSeconds}"
    Value="{Binding Source={x:Reference MymediaElement}, Path=Position.TotalSeconds, Mode=OneWay}"> 
    <Slider.WidthRequest>
        <OnIdiom x:TypeArguments="x:Double">
            <OnIdiom.Phone>400</OnIdiom.Phone>
            <OnIdiom.Tablet>980</OnIdiom.Tablet>
            <OnIdiom.Desktop>400</OnIdiom.Desktop>
        </OnIdiom>
    </Slider.WidthRequest>
</Slider>

I tried to increase the height by adding custom handlers, VisualStateManager and by adding Frame as a parent layout. None of them works, suggest a solution to increase the height of the slider.

Custom Slider that I tried added below:

public class CustomSlider : Slider
{
}

Android CustomSliderHandler:

public class CustomSliderHandler : SliderHandler
{
    public CustomSliderHandler()
    {
        Mapper.AppendToMapping("CustomSlider", (handler, view) =>
        {
            if (handler.PlatformView is SeekBar seekBar)
            {
                seekBar.SetPadding(0, 20, 0, 20); // Adjust padding
                seekBar.LayoutParameters.Height = 100; // Increase height
                seekBar.RequestLayout();
            }
        });
    }
}

iOS CustomSliderHandler:

public class CustomSliderHandler : SliderHandler
{

    public CustomSliderHandler()
    {
        Mapper.AppendToMapping("CustomSlider", (handler, view) =>
        {
            if (handler.PlatformView is UISlider uiSlider)
            {
                uiSlider.Bounds = new CGRect(uiSlider.Bounds.X, uiSlider.Bounds.Y, uiSlider.Bounds.Width, 50); // Increase height
                uiSlider.LayoutIfNeeded();
            }
        });
    }
}

I am getting below exception with the custom slider in Android platform:

Exception:>System.NullReferenceException: Object reference not set to an instance of an object. 17:20:39:358 at AppName.Platforms.Android.Renderer.CustomSliderHandler.<>c.<.ctor>b__0_0(ISliderHandler handler, ISlider view) in E:\My Projects\MAUI\AppName-app-maui\AppName\Platforms\Android\Renderer\CustomSliderHandler.cs:line 15

No exception in iOS platform, but height is not increasing.

I am using this slider for playing the audio files. When starts playing audio the MinimumTrackColor color will change to white.

Current Output:

1

Expected Output:

2

Not Monitored
Not Monitored
Tag not monitored by Microsoft.
42,511 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.