Slider

Overview

The Grial Slider control consists of an horizontal bar (which represents a double value) inside a layout. It can be used to select from a continuous set of values, ranging from a minimum to maximum.

Slider with Markers:

<grial:Slider
    Value="0.55"
    ActiveColor="#F34437"
    InactiveColor="LightGray"
    TrackCornerRadius="15"
    ValueCornerRadius="10"
    HeightRequest="60">

    <grial:Slider.Markers>
        <grial:SliderMarkers Count="5">
            <grial:SliderMarkers.MarkerTemplate>
                <ControlTemplate>
                    <BoxView
                        HeightRequest="20"
                        WidthRequest="2"
                        Color="Black"
                        CornerRadius="2" />
                </ControlTemplate>
            </grial:SliderMarkers.MarkerTemplate>
        </grial:SliderMarkers>
    </grial:Slider.Markers>

</grial:Slider>

Slider with Active, InactiveAdorner and ThumbSlider:

<grial:Slider
    Value="0.15"
    ActiveColor="#3489EB"
    InactiveColor="LightGray"
    TrackCornerRadius="15"
    HeightRequest="60">
    <grial:Slider.ThumbControlTemplate>
        <ControlTemplate>
            <Grid
                HeightRequest="28"
                WidthRequest="28"
                grial:Effects.CornerRadius="14"
                BackgroundColor="White">
                
                <BoxView
                    Color="White"
                    CornerRadius="14"
                    HeightRequest="28"
                    WidthRequest="28">
                    <BoxView.Shadow>
                        <Shadow
                            Brush="Black"
                            Opacity="0.6"
                            Radius="{ OnPlatform iOS=5, Android=20 }" />
                    </BoxView.Shadow>
                </BoxView>

                <Label
                    HorizontalOptions="Center"
                    VerticalOptions="Center"
                    HorizontalTextAlignment="Center"
                    VerticalTextAlignment="Center"
                    Text="{x:Static local:GrialIconsFont.Code}"
                    TextColor="#3489eb"
                    FontAttributes="Bold"
                    FontSize="15"
                    FontFamily="GrialIconsFill" />
            </Grid>
        </ControlTemplate>
    </grial:Slider.ThumbControlTemplate>

    <grial:Slider.ActiveAdornerControlTemplate>
        <ControlTemplate>
            <Label
                Margin="20,0,0,0"
                VerticalOptions="Center"
                Text="{x:Static local:GrialIconsFont.LightingOff }"
                TextColor="WhiteSmoke"
                FontSize="22"
                FontFamily="GrialIconsFill" />
        </ControlTemplate>
    </grial:Slider.ActiveAdornerControlTemplate>

    <grial:Slider.InactiveAdornerControlTemplate>
        <ControlTemplate>
            <Label
                Margin="0,0,20,0"
                VerticalOptions="Center"
                Text="{x:Static local:GrialIconsFont.Lightning }"
                TextColor="WhiteSmoke"
                FontSize="22"
                FontFamily="GrialIconsFill" />
        </ControlTemplate>
    </grial:Slider.InactiveAdornerControlTemplate>
</grial:Slider>

Just as .NET Maui Slider, the Value property has a default binding mode of BindingMode.TwoWay, which means that it's suitable as a binding source in an application that uses the Model-View-ViewModel (MVVM) pattern.

The thumb consists of a .NET Maui ControlTemplate inside Grial ThumbSlider control, which makes it totally customizable. The Slider also contains Markers which represent divisions and are defined in the SliderMarkers property inside the control.

caution

If both ActiveColor and ActiveBrush are set, the ActiveBrush takes precedence. Same occurs with InactiveColor and InactiveBrush.

info

The Slider captures the thumb pointer even if it pans outside the control.

info

If the Slider is inside a ScrollView, the pan in Slider happens unless the pan's velocity in y-axis is greater than in the x-axis.

Slider Properties

The Slider exposes the following properties:

Name	Type	Description	Default
Value	double	Gets or sets the current value of the Slider.	0d
Min	double	Gets or sets the minimum of the range.	0d
Max	double	Gets or sets the maximum of the range.	1d
ActiveColor	Color	Gets or sets the color of active bar.	Colors.Gray
InactiveColor	Color	Gets or sets the color of background, behind active bar.	null
ActiveBrush	Brush	Gets or sets the brush of active bar.	null
InactiveBrush	Brush	Gets or sets the brush of background, behind active bar.	null
ValueCornerRadius	CornerRadius	Gets or sets the active bar corner radius.	null
TrackCornerRadius	CornerRadius	Gets or sets the Slider corner radius.	null
ThumbControlTemplate	ControlTemplate	Gets or sets the ThumbSlider template.	null
ThumbColor	Color	Gets or sets the ThumbSlider color property.	null
Markers	SliderMarkers	Gets or sets the markers collection.	null
ActiveAdornerControlTemplate	ControlTemplate	Gets or sets the ActiveAdorner template (left side).	null
InactiveAdornerControlTemplate	ControlTemplate	Gets or sets the InactiveAdorner template (right side).	null

The SliderMarkers exposes these properties:

Name	Type	Description	Default
Count	int	Gets or sets the markers count drawn in Slider	3
MarkerTemplate	ControlTemplate	Gets or sets the minimum of the range.	null