After placing a track bar control on a form or other container, by default, its assumes a horizontal position. The position of the trackbar is controlled by Orientation property, which is of type TTrackBarOrientation:

__property Comctrls::TTrackBarOrientation Orientation =
{
    read=FOrientation,
    write=SetOrientation
};

 The TTrackBarOrientation enumerator is defined as follows:

enum TTrackBarOrientation { trHorizontal, trVertical };

To visually change the direction of the control, on the Object Inspector, set the Orientation property to the desired value. For example, to make it vertical, change the field from trHorizontal to trVertical. To change this property at runtime, assign the desired value to the property. Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::Button1Click(TObject *Sender)
{
	TrackBar1->Orientation = trVertical;
}
//---------------------------------------------------------------------------

1. Design the form as follows:
    
   

   Control Center Caption Kind Name Orientation TGroupBox   Car Description       TLabel   Make:       TEdit       edtMake   TLabel   Model:       TEdit       edtModel   TLabel   Year:       TEdit       edtYear   TLabel   Doors:       TEdit     edtDoors   TLabel   Price From:       TEdit       edtPriceFrom   TLabel   Price To:       TEdit       edtPriceTo   TImage True     imgPicture   TTrackBar     trbModel   trVertical TBitBtn     bkClose     TTrackBar     trbMake

2. Save all

The Min property controls the minimum positional value of the control while the Max value controls the opposite. The user is allowed to slide only between these two values. These two properties can be set visually in the Object Inspector using their respective fields. By default, the minimum value is set to 0 and the maximum is 10. As integers, the lowest minimum allowed is INT_MIN which is –2147483647. The maximum allowed value is INT_MAX which is 2147483647.

To change the minimum or maximum values programmatically, assign the desired value to the appropriate property. Here is an example:

//---------------------------------------------------------------------------
void __fastcall TForm1::Button1Click(TObject *Sender)
{
	TrackBar1->Min = -1205;
	TrackBar1->Max = -540;
}
//---------------------------------------------------------------------------

Always make sure that the minimum value is lower than the maximum. This safe measure will allow you to better control the current value of the control. At design time, if you try inversing the values, the studio would reset them. For example, if the Min field is 12 and you try setting it to 48 when the Max field is 25, the Min field would be reset to its original value 12. At runtime, if you try setting wrong values as follows:

//---------------------------------------------------------------------------
void __fastcall TForm1::Button1Click(TObject *Sender)
{
	TrackBar1->Min = 55;
	TrackBar1->Max = 12;
}
//---------------------------------------------------------------------------

The minimum would be set to the previous minimum value the property had and the new maximum value would be kept. If you do not know for sure which value would be greater due to an intermediary action of the user, you can write a conditional statement that would control the minimum and the maximum values.

When using the track bar, the user can slide the thumb in the desired direction, thus changing the value of the control. While it is moving, you can control the incrementing of the thumb. By default, the thumb advances or regresses by 1 unit each time it is scrolled. This unit is controlled by the Frequency property.

1. On the form, click the bottom track bar and, in the Object Inspector, change the Max value to 6
2. Save all

The thumb’s visual display appears as a small standing pentagon with two straight borders. Its size is set using the ThumbLength property:

__property int ThumbLength = {read=GetThumbLength,write=SetThumbLength};

The smaller the value, the narrower the thumb. The visual appearance of the thumb is controlled by the SliderVisible property whose Boolean value is by default set to true. Therefore, if you wish to hide the thumb, set its SliderVisible property to false.

1. On the form, click the right track box and, in the Object Inspector, change the ThumbLength value to 22
2. On the form, click the bottom track box and, in the Object Inspector, change the ThumbLength value to 24

A track bar is also equipped with small bars "|" that serve as indicators of the position occupied by the slider. These bars are called ticks. By default, the tick marks are positioned on the same side the slider is pointing. This conditional position of the ticks is controlled by the value of TickMarks property set from the TTickMark enumerator:

enum TTickMark { tmBottomRight, tmTopLeft, tmBoth };

By default, when you add a new track bar to a form, it is horizontally oriented, the slider points down, the tick marks are positioned under the sliding field. In this setting, the TickMarks property is set to tmBottomRight. To place the tick marks above the sliding field, change the value of the TickMarks property to tmTopLeft; this also has the effect of reversing the direction of the slider. As a third option, you can have the tick marks on both sides of the slider. To get this, set the TickMarks property to tmBoth. With this value, the thumb becomes a small rectangle (changing from its pentagon shape).

The sliding field of a track bar is a rectangle with a background. It stays white even as the user slides the thumb to change the control’s value.

1. On the form, click the bottom track box and, in the Object Inspector, change the TickMarks to tmBoth
2. On the form, click the bottom track box and, in the Object Inspector, change the TickMarks to tmTopLeft
    
   
3. Save all

A track bar is important when you can get its value and use it in a transaction. The most fundamental operation you can do is to display its value in an edit or a label controls. When the value of the track bar changes, we will use its OnChange() event to track its position and display its value on a label.

1. Double-click an unoccupied area of the form to generate its OnCreate event
2. Return to the form and double-click the bottom track bar
3. Return to the form and double-click the right track bar
4. Implement the events as follows:
   

   //---------------------------------------------------------------------------
   
   #include <vcl.h>
   #pragma hdrstop
   
   #include "Inventory.h"
   //---------------------------------------------------------------------------
   #pragma package(smart_init)
   #pragma resource "*.dfm"
   TfrmInventory *frmInventory;
   //---------------------------------------------------------------------------
   __fastcall TfrmInventory::TfrmInventory(TComponent* Owner)
   	: TForm(Owner)
   {
   }
   //---------------------------------------------------------------------------
   void __fastcall TfrmInventory::FormCreate(TObject *Sender)
   {
   	// Use the global array of cars to create a list of cars
   	Cars[0].Make  = L"Ford";
   	Cars[0].Model = L"Focus S Sedan";
   	Cars[0].Year  = 2010;
   	Cars[0].Doors = 4;
   	Cars[0].PriceFrom = 15387;
   	Cars[0].PriceTo = 16290;
   	Cars[0].Picture = L"FordFocus1.bmp";
   
   	// Create a list of car pictures associated with this car
   	Cars1[0] = L"FordFocus1.bmp";
   	Cars1[1] = L"FordFocus2.bmp";
   	Cars1[2] = L"FordFocus3.bmp";
   
   	// Do the same for this car
   	Cars[1].Make  = L"BMW";
   	Cars[1].Model = L"328i";
   	Cars[1].Year  = 2011;
   	Cars[1].Doors = 4;
   	Cars[1].PriceFrom = 30500;
   	Cars[1].PriceTo = 43,950;
   	Cars[1].Picture = L"BMW328a.bmp";
   
   	Cars2[0] = L"BMW328a.bmp";
   	Cars2[1] = L"BMW328b.bmp";
   	Cars2[2] = L"BMW328c.bmp";
   	Cars2[3] = L"BMW328d.bmp";
   	Cars2[4] = L"BMW328e.bmp";
   	Cars2[5] = L"BMW328f.bmp";
   
   	Cars[2].Make  = L"Mazda";
   	Cars[2].Model = L"Miata";
   	Cars[2].Year  = 2011;
   	Cars[2].Doors = 2;
   	Cars[2].PriceFrom = 22960;
   	Cars[2].PriceTo = 28400;
   	Cars[2].Picture = L"MazdaMiata1.bmp";
   
   	Cars3[0] = L"MazdaMiata1.bmp";
   	Cars3[1] = L"MazdaMiata2.bmp";
   	Cars3[2] = L"MazdaMiata3.bmp";
   	Cars3[3] = L"MazdaMiata4.bmp";
   
   	Cars[3].Make  = L"GMC";
   	Cars[3].Model = L"Acadia";
   	Cars[3].Year  = 2010;
   	Cars[3].Doors = 4;
   	Cars[3].PriceFrom = 31740;
   	Cars[3].PriceTo = 42185;
   	Cars[3].Picture = L"GMCAcadia1.bmp";
   
   	Cars4[0] = L"GMCAcadia1.bmp";
   	Cars4[1] = L"GMCAcadia2.bmp";
   	Cars4[2] = L"GMCAcadia3.bmp";
   	Cars4[3] = L"GMCAcadia4.bmp";
   	Cars4[4] = L"GMCAcadia5.bmp";
   	Cars4[5] = L"GMCAcadia6.bmp";
   
   	Cars[4].Make  = L"Acura";
   	Cars[4].Model = L"MDX";
   	Cars[4].Year  = 2010;
   	Cars[4].Doors = 4;
   	Cars[4].PriceFrom = 42230;
   	Cars[4].PriceTo = 53755;
   	Cars[4].Picture = L"AcuraMDX1.bmp";
   
   	Cars5[0] = L"AcuraMDX1.bmp";
   	Cars5[1] = L"AcuraMDX2.bmp";
   	Cars5[2] = L"AcuraMDX3.bmp";
   	Cars5[3] = L"AcuraMDX4.bmp";
   	Cars5[4] = L"AcuraMDX5.bmp";
   	Cars5[5] = L"AcuraMDX6.bmp";
   
   	Cars[5].Make  = L"Mercedes-Benz";
   	Cars[5].Model = L"E350";
   	Cars[5].Year  = 2010;
   	Cars[5].Doors = 4;
   	Cars[5].PriceFrom = 48050;
   	Cars[5].PriceTo = 85750;
   	Cars[5].Picture = L"MercedesBenzE350a.bmp";
   
   	Cars6[0] = L"MercedesBenzE350a.bmp";
   	Cars6[1] = L"MercedesBenzE350b.bmp";
   	Cars6[2] = L"MercedesBenzE350c.bmp";
   	Cars6[3] = L"MercedesBenzE350d.bmp";
   	Cars6[4] = L"MercedesBenzE350e.bmp";
   
   	Cars[6].Make  = L"Ford";
   	Cars[6].Model = L"E150";
   	Cars[6].Year  = 2010;
   	Cars[6].Doors = 4;
   	Cars[6].PriceFrom = 27970;
   	Cars[6].PriceTo = 34845;
   	Cars[6].Picture = L"FordE150XLTa.bmp";
   
   	Cars7[0] = L"FordE150XLTa.bmp";
   	Cars7[1] = L"FordE150XLTb.bmp";
   
   	// Behave as if the position of the bottom track bar was changed
   	trbMakeChange(Sender);
   }
   //---------------------------------------------------------------------------
   void __fastcall TfrmInventory::trbMakeChange(TObject *Sender)
   {
   	// Get a reference to the position of the bottom track bar
   	ReviewPosition = trbMake->Position;
   
   	// Based on the current position of the track bar, display
   	// information about the car (corresponding to the current position
   	edtMake->Text = Cars[ReviewPosition].Make;
   	edtModel->Text = Cars[ReviewPosition].Model;
   	edtYear->Text = IntToStr(Cars[ReviewPosition].Year);
   	edtDoors->Text = IntToStr(Cars[ReviewPosition].Doors);
   	edtPriceFrom->Text = FloatToStr(Cars[ReviewPosition].PriceFrom);
   	edtPriceTo->Text = FloatToStr(Cars[ReviewPosition].PriceTo);
   	imgPicture->Picture->LoadFromFile(Cars[ReviewPosition].Picture);
   
   	// Depending on the car, we don't have the same number of pictures
   	// for each car. Therefore, based on the car, change the maximum
   	// value of the right track bar
   	switch(trbMake->Position)
   	{
   		case 0:
   			trbModel->Max = 2;
   			break;
   		case 1:
   			trbModel->Max = 5;
   			break;
   		case 2:
   			trbModel->Max = 3;
   			break;
   		case 3:
   			trbModel->Max = 5;
   			break;
   		case 4:
   			trbModel->Max = 5;
   			break;
   		case 5:
   			trbModel->Max = 4;
   			break;
   		case 6:
   			trbModel->Max = 1;
   			break;
   	}
   
   	// Since the user just got to a different car, set the position of
   	// the right track bar to the beginning
   	trbModel->Position = 0;
   }
   //---------------------------------------------------------------------------
   void __fastcall TfrmInventory::trbModelChange(TObject *Sender)
   {
   	// If the user changes the position of the right track bar, show a
   	// different picture
   	switch(ReviewPosition)
   	{
   		case 0:
   			imgPicture->Picture->LoadFromFile(Cars1[trbModel->Position]);
   			break;
   		case 1:
   			imgPicture->Picture->LoadFromFile(Cars2[trbModel->Position]);
   			break;
   		case 2:
   			imgPicture->Picture->LoadFromFile(Cars3[trbModel->Position]);
   			break;
   		case 3:
   			imgPicture->Picture->LoadFromFile(Cars4[trbModel->Position]);
   			break;
   		case 4:
   			imgPicture->Picture->LoadFromFile(Cars5[trbModel->Position]);
   			break;
   		case 5:
   			imgPicture->Picture->LoadFromFile(Cars6[trbModel->Position]);
   			break;
   		case 6:
   			imgPicture->Picture->LoadFromFile(Cars7[trbModel->Position]);
   			break;
   	}
   }
   //---------------------------------------------------------------------------

5. Save all
6. Press F9 to test the application
    
   
    
   
    
   
7. Close the form and return to your programming environment