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 |