Slider Thumb Tooltip

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.