Trackbar in C#

This post explains how to change the background colour of Panel controls using a trackbar.

Introduction 

Trackbar allows users to provide input by dragging a slider on it.

Here are some important properties that are useful while working with trackbar controls:

Property Description
Maximum Maximum value of the position for the trackbar slider
Minimum Minimum value of the position for the trackbar slider
OrientationCan set the trackbar orientation to  Horizontal or Vertical. The default orientation is Horizontal.
TickFrequency No. of positions between the tick marks of the slider
Value Position of the slider

Let's consider one simple example:

Drag and drop 3 trackbar controls from the toolbox to form control.

Set the Maximum property of each trackbar control to 255 and the Minimum property to 1.

Now, drag a panel control to the form control

Double click on the first trackbar. It will generate a “Scroll” event. The Scroll event executes whenever the user scrolls the slider of the trackbar.

Now, add the following code to generate a “Scroll” event of the trackbar

  1. panel1.BackColor = Color.FromArgb(trackBar1.Value, trackBar2.Value, trackBar3.Value);  
Some important points:

  • FFrom.Argb(int,int,int) Method creates a colour structure from specified 8-bit colour values (Red, Green, Blue).
  • BBackColor is a property of trackbar. It is used to set the background colour for the trackbar. Almost every control has this property.

Do this for the remaining two trackbar controls. Your code will look this:

  1. private void trackBar1_Scroll(object sender, EventArgs e) {  
  2.  panel1.BackColor = Color.FromArgb(trackBar1.Value, trackBar2.Value, trackBar3.Value);  
  3. }  
  4. private void trackBar2_Scroll(object sender, EventArgs e) {  
  5.  panel1.BackColor = Color.FromArgb(trackBar1.Value, trackBar2.Value, trackBar3.Value);  
  6. }  
  7. private void trackBar3_Scroll(object sender, EventArgs e) {  
  8.  panel1.BackColor = Color.FromArgb(trackBar1.Value, trackBar2.Value, trackBar3.Value);  
  9. } 
Now, run the program & move all three sliders, as the sliders move, they will change the background colour of the panel.