Click here to Skip to main content
15,868,141 members
Articles / Desktop Programming / XAML
Tip/Trick

Slider Thumb Tooltip

Rate me:
Please Sign up or sign in to vote.
5.00/5 (4 votes)
28 Jan 2014CPOL2 min read 27.2K   3   4
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:

HTML
<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:

C#
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.

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

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

ASP.NET
<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.

License

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


Written By
Architect
Spain Spain
-> Cloud
-> Solution Architecture
-> .NET and Sitecore Expert
-> Travel passionate

Comments and Discussions

 
GeneralMy vote of 5 Pin
Stephin Francis28-Jan-14 22:37
Stephin Francis28-Jan-14 22:37 
QuestionHelpful article Pin
Stephin Francis28-Jan-14 22:24
Stephin Francis28-Jan-14 22:24 
This article helped me.Thanks..
GeneralMy vote of 5 Pin
Farhan Ghumra28-Jan-14 16:04
professionalFarhan Ghumra28-Jan-14 16:04 
QuestionImages? [Never mind] Pin
Ravi Bhavnani28-Jan-14 5:38
professionalRavi Bhavnani28-Jan-14 5: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.