.NET MAUI Slider & Range Slider: Thumb

• Jan 30, 2024
• 2 minutes to read

The thumb allows users to change the selected value. To change the current value, move the thumb along the scale.

This example shows how to change thumb appearance in DXSlider and DXRangeSlider controls:

XAML

<dxe:DXSlider Value="25">
    <dxe:DXSlider.ThumbAppearance>
        <dxe:DXSliderThumbAppearance 
            BackgroundColor="orange" 
            BorderColor="black"
            DisabledBackgroundColor="gray"
            DisabledBorderColor="black"
            BorderThickness="2"
            CornerRadius="25"
            Height="25"
            Width="25"
            PressedHeight="15"
            PressedWidth="15" />
    </dxe:DXSlider.ThumbAppearance> 
</dxe:DXSlider>

<dxe:DXRangeSlider StartValue="15" EndValue="85">
    <dxe:DXRangeSlider.StartThumbAppearance>
        <dxe:DXSliderThumbAppearance 
            BackgroundColor="orange" 
            BorderColor="black"
            DisabledBackgroundColor="gray"
            DisabledBorderColor="black"
            BorderThickness="2"
            CornerRadius="25"
            Height="25"
            Width="25" />
    </dxe:DXRangeSlider.StartThumbAppearance> 

    <dxe:DXRangeSlider.EndThumbAppearance>
        <dxe:DXSliderThumbAppearance ... />
    </dxe:DXRangeSlider.EndThumbAppearance> 
</dxe:DXRangeSlider>

Use the following properties to change thumb appearance in DXSlider and DXRangeSlider controls:

DXSliderThumbAppearance.BackgroundColor

Gets or sets the background color of the thumb. This is a bindable property.

DXSliderThumbAppearance.BorderColor

Gets or sets the border color of the thumb. This is a bindable property.

DXSliderThumbAppearance.DisabledBackgroundColor

Gets or sets the background color of the thumb in the disabled state. This is a bindable property.

DXSliderThumbAppearance.DisabledBorderColor

Gets or sets the border color of the thumb in the disabled state. This is a bindable property.

DXSliderThumbAppearance.BorderThickness

Gets or sets the border thickness of the thumb. This is a bindable property.

DXSliderThumbAppearance.CornerRadius

Gets or sets the corner radius of the thumb. This is a bindable property.

DXSliderThumbAppearance.Height

Gets or sets the thumb height. This is a bindable property.

DXSliderThumbAppearance.Width

Gets or sets the thumb width. This is a bindable property.

DXSliderThumbAppearance.PressedHeight

Gets or sets the thumb height in the pressed state. This is a bindable property.

DXSliderThumbAppearance.PressedWidth

Gets or sets the thumb width in the pressed state. This is a bindable property.

DXSliderThumbAppearance.SideMargin

Gets or sets the margins to the left and right sides of the thumb. This is a bindable property.