MAUI: How to increase the slider height

Question

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:

Expected Output:

Answer 1

If you want to change the width of Slider for android platform.

You can create a drawable folder in the Android/Resources folder, create a xml file called custom_seekbar_progress.xml and set the build action to the AndroidResouces

<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape android:shape="rectangle" >
<solid android:color="#CCCCCC" />
<!-- background color -->
<corners android:radius="5dp" />
<size android:height="10dp" />
<!-- progress height -->
</shape>
</item>
<item android:id="@android:id/progress"  >
<clip>
<shape android:shape="rectangle">
<solid android:color="#FFff00EE" />
<!-- seekbar color -->
<corners android:radius="5dp" />
<size android:height="10dp" />
<!-- progress height -->
</shape>
</clip>
</item>
</layer-list>

Then you can set seekBar.ProgressDrawable in the SliderHandler

SliderHandler.Mapper.AppendToMapping(nameof(Microsoft.Maui.Controls.Slider), (Handler, view) =>
            {
 
#if ANDROID
                if (Handler.PlatformView is SeekBar seekBar)
                {
                    seekBar.MaxHeight = 10;
                    seekBar.MinHeight = 10;
                    seekBar.ProgressDrawable=Platform.AppContext.Resources.GetDrawable(Resource.Drawable.custom_seekbar_progress, null);
                }
#endif
 
            });