Click here to Skip to main content
15,867,704 members
Articles / Programming Languages / Markdown
Tip/Trick

C# Slider/Trackbar Control using Windows Forms

Rate me:
Please Sign up or sign in to vote.
4.94/5 (53 votes)
9 Dec 2019CPOL5 min read 105.9K   13.6K   71   27
Yet another slider/trackbar in C#

Image 1

Introduction

ColorSlider is a slider/trackbar control written in C# (Windows Form).

This is an alternative to the standard Microsoft Visual Studio trackbar control which is not so flexible, lacks basic functionalities and is a little poor in design.

The code is a free interpretation of the original code from Michal Brylka published in the site Code Project.
See https://www.codeproject.com/Articles/17395/Owner-drawn-trackbar-slider

The main enhancements brought by this control are:

  • A less surface
  • The possibility to parametrize the shape of the thumb or to replace it by an image
  • Subdivisions added between main divisions
  • The text value of the main divisions
  • Many colors parametrization added (ticks, bar, elapsed)
  • The orientation can be horizontal and vertical (starting from the bottom)

Using the Code

The control is drawn in the overridden event OnPaint, depending on if it is enabled or not, and if the mouse is over it or not.

  • If not enabled, the colors are desaturated
  • If the mouse is over, the colors are lighten
  • Else, the colors are those chosen in the property box

Depending on these colors, the function DrawColorSlider is called and draws everything.

3 rectangles are mainly used to draw the control:

  • barRect is used to draw the bar (Elapsed and remaining)
  • thumbRect is used to draw the thumb
  • elapsedRect is the rectangle for the elapsed bar (the left of the thumb if the orientation is horizontal)

The elapsed bar is composed of 3 single lines (inner, top and bottom), having each its own color:

C++
// Draw horizontal elapsed inner line with "DrawLine" function
// x1 = barRect.X
// y1 = barRect.Y + barRect.Height / 2
// x2 = barRect.X + elapsedRect.Width
// y2 = y1
e.Graphics.DrawLine(new Pen(elapsedInnerColorPaint, 1f), x1, y1, x2, y2);

Top and bottom lines are drawn 1 pixel above or under the inner line. A vertical line of 3 pixels is added at the beginning to improve the 3D effect.

Image 2

The rest of the bar is also composed of 3 single lines (inner, top and bottom), each having its own color.
A vertical line of 3 pixels is added at the end to improve the 3D effect.

Image 3

The thumb is drawn according to whether it is an image or not:

  • Image: e.Graphics.DrawImage(bmp, thumbRect, srceRect, GraphicsUnit.Pixel);
  • Drawn by the control, with a linear gradient, e.Graphics.DrawPath(thumbPen, thumbPath);

The ticks and texts are drawn in two nested loops:

  • A first loop from 0 to ScaleDivision for the main graduations and texts
  • A nested loop from 0 to ScaleSubDivision for the subdivisions

The offset between each tick is a multiple of W/(nbticks -1) where:

  • W is the width of the bar, minus the width of the thumb, in order that when the thumb is at minimum position or maximum position, the graduation coincides with the middle of the thumb
  • nbticks is the number of graduations including subdivisions: nbticks = 1 + _scaleDivisions * (_scaleSubDivisions + 1);

Properties

Thumb  
ThumbSize The size of the thumb (Width, Height) allowing you to make circles or rectangles
ThumbCustomShape Gets or sets the thumb custom shape. Use ThumbRect property to determine bounding rectangle
ThumbRoundRectSize Gets or sets the size of the thumb round rectangle edges
BorderRoundRectSize Gets or sets the size of the border round rect
DrawSemitransparentThumb Gets or sets a value indicating whether to draw semitransparent thumb
ThumbImage Gets or sets a specific image used to render the thumb

 

Appearance  
Orientation Gets or sets the orientation of the Slider (Horizontal or vertical)
DrawFocusRectangle Gets or sets a value indicating whether to draw focus rectangle
MouseEffects Gets or sets whether mouse entry and exit actions have impact on how the control looks
Padding Gets or Sets the margins inside the control (left & right if horizontal and bottom & top if vertical) to display the ticks with large numbers

 

Values  
Value Gets or sets the value of Slider
Minimum (0) Gets or sets the minimum value (decimal & negative values)
Maximum (100) Gets or sets the maximum value (decimal & negative values)
SmallChange Gets or sets trackbar's small change. It affects how to behave when directional keys are pressed
LargeChange Gets or sets trackbar's large change. It affects how to behave when PageUp/PageDown keys are pressed.
MouseWheelBarPartitions Gets or sets the mouse wheel bar partitions

 

Colors  
ThumbOuterColor Gets or sets the thumb outer color
ThumbInnerColor Gets or sets the inner color of the thumb
ThumbPenColor Gets or sets the color of the thumb pen
BarInnerColor Gets or sets the inner color of the bar
BarPenColorTop Gets or sets the top color of the bar
BarPenColorBottom Gets or sets the bottom color of the bar
ElapsedPenColorTop Gets or sets the top color of the elapsed
ElapsedPenColorBottom Gets or sets the bottom color of the elapsed
ElapsedInnerColor Gets or sets the inner color of the elapsed
TickColor Gets or sets the color of the graduations

 

Preformatted colors  
ColorSchema 3 predefined color schemas are proposed (red, green, blue). The colors can be changed manually and they overwrite them.

 

Ticks  
TickStyle Gets or sets where to display the ticks (None, both top-left, bottom-right)
ScaleDivisions Gets or sets the number of intervals between minimum and maximum
ScaleSubDivisions Gets or sets the number of subdivisions between main divisions of graduation
ShowSmallScale Shows or hides subdivisions of graduations
ShowDivisionsText Show or hide text value of main graduations
TickDivide float) Gets or sets a value used to divide the graduations (ex: ticks in grams and graduations in kilograms with TickDivide = 1000)
TickAdd (float) Gets or sets a value added to the graduations (ex: T(°C) = T(K) - 273.15)
Font  
Font Gets or sets the text font of the graduations
ForeColor Gets or sets the text color of the graduations

Events

Two events are available:

  • ValueChanged
  • Scroll

Typical usage of ValueChanged event:

C++
private void colorSlider1_ValueChanged(object sender, EventArgs e)
 {
     label1.Text = colorSlider1.Value.ToString();
 }

Points of Interest

This project was developed with Visual Studio version 2017.

So, as you see, nothing very difficult in this control.
You just have to draw lines and calculate precisely where they start and where they end...

This simple control shows that with a few efforts we can design a control with beautiful effects. The difficulty in reality is not technical, but it consists of choosing the right assortment of colors.

License

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


Written By
Architect
France France
Architect/engineer

Comments and Discussions

 
QuestionExcellent! Excellent! Excellent! Pin
marjaan8-Apr-20 10:28
marjaan8-Apr-20 10:28 
QuestionColorSlider Pin
Member 147848072-Apr-20 4:04
Member 147848072-Apr-20 4:04 
QuestionC++ ? Pin
Rick York8-Dec-19 15:02
mveRick York8-Dec-19 15:02 
GeneralMy vote of 5 Pin
LightTempler7-Dec-19 8:34
LightTempler7-Dec-19 8:34 
QuestionCan add 2 or more thumbs? Pin
VichoRL26-Nov-19 8:04
VichoRL26-Nov-19 8:04 
AnswerRe: Can add 2 or more thumbs? Pin
Fabrice Lacharme7-Dec-19 0:50
Fabrice Lacharme7-Dec-19 0:50 
QuestionKeyboard and mouse wheel issues Pin
Member 1415463824-Feb-19 11:23
Member 1415463824-Feb-19 11:23 
QuestionExcellent Pin
victorbos18-Dec-17 6:29
victorbos18-Dec-17 6:29 
PraiseWhat a nice project! Pin
Mats Eriksson13-Dec-17 3:34
Mats Eriksson13-Dec-17 3:34 
GeneralMy vote of 5 Pin
BillWoodruff11-Dec-17 20:33
professionalBillWoodruff11-Dec-17 20:33 
QuestionWinForms, eh? Pin
dandy7227-Nov-17 6:03
dandy7227-Nov-17 6:03 
AnswerRe: WinForms, eh? Pin
Fabrice Lacharme27-Nov-17 23:49
Fabrice Lacharme27-Nov-17 23:49 
GeneralRe: WinForms, eh? Pin
dandy7228-Nov-17 16:42
dandy7228-Nov-17 16:42 
BugUsing large values, tracker thumb becomes invisible. Pin
Member 1049023927-Nov-17 3:02
Member 1049023927-Nov-17 3:02 
GeneralRe: Using large values, tracker thumb becomes invisible. Pin
Fabrice Lacharme28-Nov-17 23:39
Fabrice Lacharme28-Nov-17 23:39 
PraiseVery nice Trackbar control! Pin
Jonathan Reis22-Nov-17 4:16
Jonathan Reis22-Nov-17 4:16 
GeneralMy vote of 5 Pin
Franc Morales21-Nov-17 18:56
Franc Morales21-Nov-17 18:56 
QuestionFix vertical display slider Pin
Steven Savior15-Nov-17 23:50
Steven Savior15-Nov-17 23:50 
AnswerRe: Fix vertical display slider Pin
Fabrice Lacharme20-Nov-17 4:11
Fabrice Lacharme20-Nov-17 4:11 
Questionsome minor suggested modifications on fixing vertical display of slider with negative value input of "minimum" parameter Pin
Member 1350304412-Nov-17 22:04
Member 1350304412-Nov-17 22:04 
AnswerRe: some minor suggested modifications on fixing vertical display of slider with negative value input of "minimum" parameter Pin
Fabrice Lacharme21-Nov-17 22:35
Fabrice Lacharme21-Nov-17 22:35 
Questioncalculation bug in vertical display Pin
Member 1350304412-Nov-17 9:30
Member 1350304412-Nov-17 9:30 
PraiseExcellent! Pin
jediYL27-Jun-17 18:17
professionaljediYL27-Jun-17 18:17 
Questionvery nice one Pin
Mou_kol26-Jun-17 22:34
Mou_kol26-Jun-17 22:34 
PraiseMy vote 5 Pin
N. Henrik Lauridsen26-Jun-17 9:11
N. Henrik Lauridsen26-Jun-17 9:11 
Looking very nice.
Thank you for sharing

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.