Click here to Skip to main content
15,562,256 members
Articles / Desktop Programming / XAML
Posted 28 Jan 2014

Tagged as


3 bookmarked

Slider Thumb Tooltip

Rate me:
Please Sign up or sign in to vote.
5.00/5 (4 votes)
28 Jan 2014CPOL2 min read
How to convert slider thumb tooltip value


Slider is an intuitive and interactive UI control to pick as well as to show the values. It’s used mostly to pick numeric values. Slider control has maximum and minimum double data type property which is used to set the maximum and minimum value to pick. It has a value double property which returns what is the current picked value.  

Thumb is a small rectangle UI control on slider’s track which is being dragged by user to pick the value.


Slider can also be used to pick date and time. So it’s based on developer how one can leverage numeric values in particular model data type. Slider is not only for picking but also for showing the data for example a seek bar of media player. One can customize the slider control to show it as seek bar of media player. By default, slider control doesn’t show current value. So slider’s thumb tooltip is useful at that time. If user taps and holds, then value is shown in thumb tooltip.

One will think tooltip is visible on mouse hover event, then how tooltip is used for slider in touch device? So on touch device when user presses the thumb, the tooltip shows the current value, when the slider is being dragged, underlying values is being shown in tooltip.

Using the Code

Have you ever thought how you can change the format of slider thumb’s tooltip value? For example, you want to use a slider to pick time from 0 minutes to 15 minutes. So will you code like this:

<Slider Width="500" Maximum="900" Value="120"/>  

Now user wants to pick 9 minutes 22 seconds, so user has to calculate like given below:

9 X 60 = 540 
540 + 22 = 562

and then user will drag the slider thumb till the tooltip shows 562 in harder ways.

Image 1

Have you ever thought of how you can display “9 minutes 22 seconds” instead of boring “562”? Ok, I am here to help you. Slider class offers a property called ThumbToolTipValueConverter, which takes IValueConverter object. In simple words, you can convert the slider value to a particular format using a class which implements IValueConverter interface. So my class will look like given below:

class TooltipValueConverter : IValueConverter
    public object Convert(object value, Type targetType, object parameter, string language)
        var seconds = System.Convert.ToInt32(value);
        return string.Format("{0} {1}", (seconds / 60) % 60 + " minutes", seconds % 60 + " seconds");
    public object ConvertBack(object value, Type targetType, object parameter, string language)
        throw new NotImplementedException();

Then you need to add TooltipValueConverter in page’s resource & then add converter object as value of slider’s ThumbToolTipValueConverter property.

    <local:TooltipValueConverter x:Key="TooltipValueConverter"/>

Here local is namespace reference of class TooltipValueConverter declared in page tag.

<Slider Width="500" Maximum="900" Value="120" ThumbToolTipValueConverter="{StaticResource TooltipValueConverter}"/> 

Now it’s damn easy to pick 9 minutes and 22 seconds.

Image 2

In this way, you can show slider value in customized format from base numeric value using converter.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
Spain Spain
-> Software Architect
-> .NET and Sitecore Expert
-> Travel passionate

Comments and Discussions

GeneralMy vote of 5 Pin
Stephin Francis28-Jan-14 23:37
Stephin Francis28-Jan-14 23:37 
QuestionHelpful article Pin
Stephin Francis28-Jan-14 23:24
Stephin Francis28-Jan-14 23:24 
GeneralMy vote of 5 Pin
Farhan Ghumra28-Jan-14 17:04
professionalFarhan Ghumra28-Jan-14 17:04 
Helpful article for WinRT app developers.
QuestionImages? [Never mind] Pin
Ravi Bhavnani28-Jan-14 6:38
professionalRavi Bhavnani28-Jan-14 6:38 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.