Skip to main content

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:

Slider Sample
<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:

Slider Sample
<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:

NameTypeDescriptionDefault
ValuedoubleGets or sets the current value of the Slider.0d
MindoubleGets or sets the minimum of the range.0d
MaxdoubleGets or sets the maximum of the range.1d
PrecisiondoubleGets or sets the distance between accepted values.-1d
ActiveColorColorGets or sets the color of active bar.Colors.Gray
InactiveColorColorGets or sets the color of background, behind active bar.null
ActiveBrushBrushGets or sets the brush of active bar.null
InactiveBrushBrushGets or sets the brush of background, behind active bar.null
ValueCornerRadiusCornerRadiusGets or sets the active bar corner radius.null
TrackCornerRadiusCornerRadiusGets or sets the Slider corner radius.null
ThumbControlTemplateControlTemplateGets or sets the ThumbSlider template.null
ThumbColorColorGets or sets the ThumbSlider color property.null
MarkersSliderMarkersGets or sets the markers collection.null
ActiveAdornerControlTemplateControlTemplateGets or sets the ActiveAdorner template (left side).null
InactiveAdornerControlTemplateControlTemplateGets or sets the InactiveAdorner template (right side).null

Commands

NameTypeDescription
ValueChangedCommandICommandInvoked when the Value changes.
DragStartedCommandICommandInvoked when dragging starts.
DragCompletedCommandICommandInvoked when dragging ends.

The SliderMarkers exposes these properties:

NameTypeDescriptionDefault
CountintGets or sets the markers count drawn in Slider3
MarkerTemplateControlTemplateGets or sets the minimum of the range.null