Click here to Skip to main content
Click here to Skip to main content

Slider Thumb Tooltip

, 28 Jan 2014
Rate this:
Please Sign up or sign in to vote.
How to convert slider thumb tooltip value

Introduction

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.

Purpose

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.

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.

<Page.Resources>
    <local:TooltipValueConverter x:Key="TooltipValueConverter"/>
</Page.Resources> 

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.

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

License

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

About the Author

Borja Prado
Chief Technology Officer Eflox Software
Spain Spain
-> CTO and Team Leader at Eflox Software
-> Azure Advisor at Reddium
-> Computer Science Degree
Follow on   Twitter   LinkedIn

Comments and Discussions

 
GeneralMy vote of 5 PinmemberStephin Francis28-Jan-14 22:37 
QuestionHelpful article PinmemberStephin Francis28-Jan-14 22:24 
GeneralMy vote of 5 PinmemberFarhan Ghumra28-Jan-14 16:04 
QuestionImages? [Never mind] PinprofessionalRavi Bhavnani28-Jan-14 5:38 

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140721.1 | Last Updated 28 Jan 2014
Article Copyright 2014 by Borja Prado
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid