Click here to Skip to main content
14,271,712 members

TimeSlider - A time-based TrackBar

Rate this:
4.35 (11 votes)
Please Sign up or sign in to vote.
4.35 (11 votes)
6 Apr 2006
A custom trackbar control using dates instead of integer values.

Sample Image


A new work project involved a video playback system, with the ability to annotate key frames and segments within the video as points of interest. Other parties could then come back and search for annotated frames within the video, thus being able to jump directly to key images rather than having to look through the entire file.

It stuck me early on that it would be nice to have a trackbar available below the video, similar to the Windows Media Player or the QuickTime viewer. Even better would be one that kept track of where within the video the user is, and could show key information about video start and end times. I am a long-time CodeProject fan, and this quickly struck me as a chance to give something back for all the code I've stolen over the years. Thus was born the idea of the TimeSlider control.

Using the control

The TimeSlider control can be used like any other .NET control - just add it to your toolbox and then drag it onto a form. All properties are exposed through the standard property grid within VS.NET.

The TimeSlider control is basically a trackbar control that uses DateTime values instead of integer values as input (and output). It is based on the standard Windows trackbar, but properties such as Minimum, Maximum, and Value are now DateTime values, while the SmallChange, LargeChange, and TickFrequency properties are now TimeSpan values.

In addition, the TimeSlider provides some new functionality that either made sense to me or was specifically needed for my project. These are:

  • Turn on or off labels that show the minimum, maximum, and the current value. The format for labels is defined through the Format and CustomFormat properties. I also extended the number of available "standard" formats to include things like ShortDateLongTime and NoDateShortTime.
  • View current values as either absolute DateTime values or as duration into the time period.
  • Ability to auto-increment the maximum date value if the incoming date value is greater than the defined maximum. This is useful for live video feeds, where you don't know what the end date is.
  • Ability to define a segment of interest within a timeline, which shows up as a segment bar on the control.

Using the code

The majority of the code behind the TimeSlider control is pretty straightforward and not worth special note here. The control uses the Windows TrackBar as its base class. Under the hood, the TrackBar is always fed values between 0 and 100, which are translated from date values before being passed on to the control. In reverse fashion, integer values fed from the control when the puck is moved are translated into date values and then passed on to the container.

double nTicksMin = mdtMin.Ticks;
double nTicksMax = mdtMax.Ticks;

double d1 = ( (double)base.Value ) / 100.0;
double nTicksCur = d1 * ( nTicksMax - nTicksMin ) + nTicksMin;
mdtCur = new DateTime((long)nTicksCur);

The one point of interest is the ability to draw onto the existing TrackBar control. The Windows controls are set up to either perform all the drawing, in which case no OnPaint events are sent to a sub-classed control, or to do none of the drawing, expecting the new control to perform all painting operations during the OnPaint event.

In my case, I wanted the TrackBar to draw itself, but allow me to draw a segment bar on top. To get this working, I had to perform some trickery, swapping the UserPaint flag just long enough to convince the base control to draw itself.

public TimeSlider() {


    // this call says "I'll draw it myself"
    this.SetStyle(ControlStyles.AllPaintingInWmPaint |
        ControlStyles.ResizeRedraw |
        ControlStyles.UserPaint, true);


protected override void OnPaint(PaintEventArgs e) {
    base.SetStyle(ControlStyles.UserPaint, false);

    if ( mbShowSegment ) {
        new Rectangle(mSegmentRect.X,

    base.SetStyle(ControlStyles.UserPaint, true);


The control only behaves properly in horizontal layout mode, and looks best with the tick style set to BottomRight. This would definitely be a candidate for version 2 (if enough interest exists).


This is version 1 of this control. Please feel free to report errors, issues, or requests.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Tom Holt
Web Developer
United States United States
No Biography provided

Comments and Discussions

QuestionMultiple Track Points Pin
Su Win17-Aug-08 23:29
memberSu Win17-Aug-08 23:29 
Answerimproved granularity of base value .... Pin
jsytniak3-Jun-08 8:55
memberjsytniak3-Jun-08 8:55 
NewsSuspendLayout - never really resumes [modified] Pin
jsytniak23-Mar-08 7:42
memberjsytniak23-Mar-08 7:42 
GeneralTimeSlider set value on load Pin
trampax6622-Nov-07 1:37
membertrampax6622-Nov-07 1:37 
GeneralMulitple TrackPoints Pin
bizzysim6-Jul-07 9:42
memberbizzysim6-Jul-07 9:42 
QuestionRe: Mulitple TrackPoints Pin
Ibrahim Dwaikat30-Oct-07 9:11
memberIbrahim Dwaikat30-Oct-07 9:11 
GeneralSome suggested updates Pin
wildman_32320-Apr-07 5:15
memberwildman_32320-Apr-07 5:15 
GeneralFlickering Pin
q23r23-Nov-06 19:33
memberq23r23-Nov-06 19:33 
GeneralRe: Flickering Pin
annae9021-May-13 2:17
memberannae9021-May-13 2:17 
QuestionSegment Display doen't work [modified] Pin
kada1237-Oct-06 22:11
memberkada1237-Oct-06 22:11 
AnswerRe: Segment Display doen't work Pin
kada1239-Oct-06 6:02
memberkada1239-Oct-06 6:02 
AnswerRe: Segment Display doesn't work [modified] Pin
jsytniak21-Mar-08 14:46
memberjsytniak21-Mar-08 14:46 
QuestionDrawing labels twice for each update? Pin
MetaGeek1-Aug-06 7:27
memberMetaGeek1-Aug-06 7:27 
GeneralThanks + few points. Pin
Amit_8-May-06 7:16
memberAmit_8-May-06 7:16 
GeneralLink fix please Pin
fwsouthern6-Apr-06 16:23
memberfwsouthern6-Apr-06 16:23 
GeneralRe: Link fix please Pin
Tom Holt6-Apr-06 18:46
memberTom Holt6-Apr-06 18:46 

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.

Posted 6 Apr 2006


69 bookmarked