CODEWITHSUNDEEP
javac#androidxamarin.formsxamarin.android
Đỗ Tùng Lâm
Đỗ Tùng Lâm

Reputation: 1

How to customize slider in xamarin form?

I want to customize a slider so that it looks like the picture below:

Target slider image

My code in file .xaml : 

<Slider MaximumTrackColor="Black" 
        MinimumTrackColor="Black" 
        HeightRequest="50" 
        ThumbColor="Black"
        ThumbImageSource="iconsc.png"
></Slider>

Result :

enter image description here

Can anyone help me to customize the slider so that it looks like the picture at the top?

Upvotes: 0

Views: 2209

Answers (1)

Kapusch
Kapusch

Reputation: 417

I've been able to achieve what you want in Xamarin.Forms 4.5.x by the following XAML code :

        <Slider
            Maximum="5"
            MaximumTrackColor="Yellow"
            Minimum="0"
            MinimumTrackColor="Black"
            ThumbColor="Yellow"
            Value="3">
            <Slider.ThumbImageSource>
                <FontImageSource
                    FontFamily="{StaticResource MaterialFontFamily}"
                    Glyph="{StaticResource Star}"
                    Size="64"
                    Color="{DynamicResource SystemYellow}" />
            </Slider.ThumbImageSource>
        </Slider>

enter image description here

Using fonts is easy, please read this great article in order to use them : https://montemagno.com/using-font-icons-in-xamarin-forms-goodbye-images-hello-fonts/

Upvotes: 1

Related Questions