Overview
A slider is a Windows control equipped with a small bar, also called a thumb, that slides along a visible line. There are two types of sliders: horizontal and vertical:
To use the slider control, the user can drag the thumb in one of two directions. If the slider is horizontal, the user can drag the thumb left or right. The thumb of a vertical slider can be dragged up or down. This changes the position of the thumb. The user can also click the desired position along the line to place the thumb at the desired location. Alternatively, when the slider has focus, the user can also use the arrow keys of the keyboard to move the thumb.
A slider is configured with a set of values from a minimum to a maximum. Therefore, the user can make a selection included in that range. Optionally, a slider can be equipped with small indicators called ticks:
The ticks can visually guide the user for the available positions of the thumb mark. A slider can be used to let the user specify a value that conforms to a range. When equipped with ticks, a slider can be used to control exact values that the user can select in a range, preventing the user from setting just any desired value.
For this application, we will help the user display different pictures from a series of 10. If you want, you can start a new Dialog-based application named CarInventory with no About Box and set the Dialog Title to Car Inventory
Delete the TODO line and the OK button
Save the following pictures to your hard drive:
On the main menu, click Insert -> Resource or Project -> Add Resource…
On the Add Resource dialog box, click Import… and import the above pictures. If you are using MSVC 6, you may receive a message box when you import each picture, simply click OK
Change the ID of the new bitmap to IDB_CIVIC, IDB_ELANTRA, IDB_ESCAPE, IDB_ESCORT, IDB_FOCUS, IDB_MARQUIS, IDB_MYSTIQUE, IDB_NAVIGATOR, IDB_SENTRA, and IDB_SEPHIA respectively
Add a Picture control
Type to Bitmap and set its Bitmap to IDB_CIVIC
Add a Control variable for the picture control and name it m_Preview
To store the values for the controls on the dialog box, in the header file of the dialog box, declare a private UINT array named CarPicture[10]
To initialize the array, type the following in the OnInitDialog event:
BOOL CSlider1Dlg::OnInitDialog()
{
CDialog::OnInitDialog();
SetIcon(m_hIcon, TRUE);// Set big icon
SetIcon(m_hIcon, FALSE);// Set small icon
// TODO: Add extra initialization here
CarPicture[0] = IDB_CIVIC;
CarPicture[1] = IDB_ELANTRA;
CarPicture[2] = IDB_ESCAPE;
CarPicture[3] = IDB_ESCORT;
CarPicture[4] = IDB_MARQUIS;
CarPicture[5] = IDB_MYSTIQUE;
CarPicture[6] = IDB_NAVIGATOR;
CarPicture[7] = IDB_SENTRA;
CarPicture[8] = IDB_FOCUS;
CarPicture[9] = IDB_SEPHIA;
return TRUE; // return TRUE unless you set the focus to a control
}
To display default values in the dialog box, on top of its OnPaint() event, type the following:
void CSlider1Dlg::OnPaint()
{
CBitmap Bmp;
Bmp.LoadBitmap(CarPicture[0]);
m_Preview.SetBitmap(Bmp);
UpdateData(FALSE);
if (IsIconic())
{
CPaintDC dc(this); // device context for painting
SendMessage(WM_ICONERASEBKGND, (WPARAM) dc.GetSafeHdc(), 0);
// Center icon in client rectangle
int cxIcon = GetSystemMetrics(SM_CXICON);
int cyIcon = GetSystemMetrics(SM_CYICON);
CRect rect;
GetClientRect(&rect);
int x = (rect.Width() - cxIcon + 1) / 2;
int y = (rect.Height() - cyIcon + 1) / 2;
// Draw the icon
dc.DrawIcon(x, y, m_hIcon);
}
else
{
CDialog::OnPaint();
}
}
Test the application and return to MSVC
Slider Creation
To provide a slider to an application, from the Controls toolbox, click the Slider button
To programmatically create a slider, declare a pointer to CSliderCtrl using the new operator. To initialize the control, call its Create() method. Here is an example: BOOL CDlgSlide::OnInitDialog()
{
CDialog::OnInitDialog();
// TODO: Add extra initialization here
CSliderCtrl *TrackBar = new CSliderCtrl;
TrackBar->Create(WS_CHILD | WS_VISIBLE,
CRect(15, 20, 222, 50), this, 0x14);
return TRUE; // return TRUE unless you set the focus to a control
// EXCEPTION: OCX Property Pages should return FALSE
}
On the Controls toolbox, click the Slider button
Save All
Slider Properties
After placing a slider control on a form or other host, by default, its assumes a horizontal direction. If you want a vertical slider, change the value of the Orientation property. If you are dynamically creating the control, its default orientation would be horizontal, whose style is TBS_HORZ. If you want a vertical slider, apply the TBS_VERT style: BOOL CDlgSlide::OnInitDialog()
{
CDialog::OnInitDialog();
// TODO: Add extra initialization here
CSliderCtrl *TrackBar = new CSliderCtrl;
TrackBar->Create(WS_CHILD | WS_VISIBLE | TBS_VERT,
CRect(20, 20, 50, 250), this, 0x14);
return TRUE; // return TRUE unless you set the focus to a control
// EXCEPTION: OCX Property Pages should return FALSE
}
The new slider appears as one line, horizontal or vertical, that guides the user with the area to slide the thumb. When sliding the thumb along the line, the user can set only the value where the thumb is positioned. Alternatively, if you want the user to be able to select a range of values instead of just a value, at design time, you can set the Enable Selection property to True. This is equivalent to adding the TBS_ENABLESELECTION style. A slider equipped with this style displays a 3-D “whole” in the body of the slider:
The selection area allows the user to select a range of values.
The thumb of a slider can assume one of three shapes. By default, it appears as a rectangular box. Alternatively, you can convert one of its shorter borders to appear as an arrow. The shape of the thumb is controlled at design time by the Point property. Its default value is Both, which gives it a rectangular shape. You can get this same shape by omitting or adding the TBS_BOTH value.
For a horizontal slider, you can make the thumb’s arrow point to the left by changing the Point property to Top/Left. If the slider is horizontal, this Point value would orient the thumb arrow to the top:
To make the thumb of a dynamically created horizontal slider point up, add the TBS_TOP style. If the slider is vertical, to point its thumb to the left, add the TBS_LEFT style to it.
If you want the thumb to point down for a horizontal slider, set the Point property to Bottom/Right. This same value would make the thumb of a vertical slider point n the right direction:
To point the thumb up for a horizontal slider you are programmatically creating, add the TBS_BOTTOM. For the thumb of a vertical slider to point right, add the TBS_RIGHT to it.
If you want to guide the user with some ticks on the control, at design time, set the Tick Marks property to True. If you are dynamically creating the slider and you want it to display ticks, simply adding the either the TBS_VERT or the TBS_HORZ style equips the slider with ticks. If you don't want to display the ticks at all, at design time, clear the Tick Marks property or set its value to False.
The ticks are positioned on the side the thumb is pointing. If the slider is created with the Both value for the Point property or the TBS_BOTH style, the ticks would appear on both sides the thumb.
The thumb of a slider is used to scroll from one minimum value to another. The range of these extreme values can be divided in regular increments that can further guide the user with value selection. To display where these increments are set, at design time, set the Auto Ticks property to True or add the TBS_AUTOTICKS style to a dynamic slider.
While the slider control is selected on the dialog box, on the Properties window, change its ID to IDC_SLIDER
Check its Auto Ticks check box or set it to True
Check its Tick Marks check box or set it to True
Set its Point property to Top/Left
Set to True the Tooltips property of the slider control (MSVC 7)
Add a CSliderCtrl Control variable for the slider and name it m_CarSlider
Save All
Slider Methods
As seen earlier, the slider control is based on the CSliderCtrl class. Therefore, we saw that we can dynamically create a slider by declaring pointer to CSliderCtrl and call its Create() method to initialize it. Once a slider has been designed and received the desired style, you can programmatically use it and provide the necessary feedback to the user.
A slider is a control that provides a range of values between which the user can navigate using the control’s thumb or by clicking on the slider’s line. Usually, the first aspect you may need to configure on your control is to specify its limit values. To specify the minimum value of a slider control, you can call the CSliderCtrl::SetRangeMin() method. Its syntax is: void SetRangeMin(int nMin, BOOL
bRedraw = FALSE);
The nMin value is the new minimum value that the slider can assume. The control is typically redrawn once the new value has been set. If you don't want the control to be redrawn, pass a second argument with the FALSE value. If the lowest value of the control has already been set and you want to find out what that value is, you can call the CSliderCtrl::GetRangeMin() method. Its syntax is: int GetRangeMin() const;
This method simply returns the lowest value that the slider can assume when the user has dragged the thumb to the extreme left or bottom.
To set the highest value of a slider control, you can call the SliderCtrl::SetRangeMax() method. Its syntax is: void SetRangeMax(int nMax, BOOL
bRedraw = FALSE);
The nMax argument holds the new maximum value for the control. Here is an example: BOOL CControlsDlg::OnInitDialog()
{
CDialog::OnInitDialog();
// TODO: Add extra initialization here
m_Slider.SetRangeMin(0);
m_Slider.SetRangeMax(50);
return TRUE; // return TRUE unless you set the focus to a control
// EXCEPTION: OCX Property Pages should return FALSE
}
If the maximum value of the control had previously been set, you can find it out by calling the SliderCtrl::GetRangeMax() method. Its syntax is: int GetRangeMax() const;
This method returns the highest value that the slider control can have.
To set both the minimum and the maximum values of the slider with one line of code, you can call the CSliderCtrl::SetRange() method. Its syntax is: void SetRange(int nMin, int nMax, BOOL
bRedraw = FALSE);
The nMin and the nMax arguments hold the lowest and the highest respective values of the control. Here is an example:BOOL CControlsDlg::OnInitDialog()
{
CDialog::OnInitDialog();
// TODO: Add extra initialization here
m_Slider.SetRange(0, 50);
return TRUE; // return TRUE unless you set the focus to a control
// EXCEPTION: OCX Property Pages should return FALSE
}
If the control is already functioning and you want to know its limit values, you can call the CSliderCtrl::SetRange() method whose syntax is: void GetRange(int& nMin, int& nMax) const;
This method returns two values, namely the lowest value, as nMin, and the highest value, as nMax.
Once the minimum and maximum values have been set, the user can slide the thumb to select a value or a range. This value is what mostly interests you. While sliding the thumb, the value of the slider is called its position. At startup or at any time, you can set a specific position for the thumb. This can be done by calling the CSliderCtrl::SetPos() method. Its syntax is: void SetPos(int nPos);
The nPos argument holds the new position of the slider. Here is an example: BOOL CControlsDlg::OnInitDialog()
{
CDialog::OnInitDialog();
// TODO: Add extra initialization here
m_Slider.SetRange(0, 50);
m_Slider.SetPos(32);
return TRUE; // return TRUE unless you set the focus to a control
// EXCEPTION: OCX Property Pages should return FALSE
}
The value specified using the SetPos() method should be in the range nMax – nMin of the SetRange() method. If there is a possibility that this value is outside the valid range, you can call the CSliderCtrl::VerifyPos() method to check it. Its syntax is:
void VerifyPos( );
When the position of the thumb has change and you want to find out what it is, call the CSliderCtrl::GetPos() method whose syntax is:
int GetPos() const;
If the slider control was specified to let the user select a range, you can define your own selected range at any time by callin the CSliderCtrl::SetSelection() method. Its syntax is:
void SetSelection(int nMin, int nMax);
When calling this method, make sure you specify the nMin and the nMax values so that this nMin is greater than the minimum value of the slider and this nMax is less than the highest possible value of the slider. Furthermore, the value of this nMin must be less than that of nMax. This relationshipd can be illustrated as follows:
Minimum <= nMin < nMax <= Maximum
Here is an example: BOOL CControlsDlg::OnInitDialog()
{
CDialog::OnInitDialog();
// TODO: Add extra initialization here
m_Slider.SetRange(0, 50);
m_Slider.SetPos(32);
m_Slider.SetSelection(22, 42);
return TRUE; // return TRUE unless you set the focus to a control
// EXCEPTION: OCX Property Pages should return FALSE
}
If a selected range has been performed on the slider, if you want to get the minimum and the maximum values of the selection, you can call the CSliderCtrl::GetSelection() method whose syntax is:
void GetSelection(int& nMin, int& nMax) const;
This method returns two values, the minimum as nMin and the maximum as nMax.
If the slider controla is configure to displays ticks, you can specify their frequncy with a call to the CSliderCtrl::SetTicFreq() method. Its syntax is: void SetTicFreq(int nFreq);
In the OnInitDialog event of the dialog class, set the range of values of the slider to 0 to 9 and the frequency of its ticks to:
m_CarSlider.SetRange(1, 10);
m_CarSlider.SetTicFreq(1);
return TRUE; // return TRUE unless you set the focus to a control
}
Test the application and return to MSVC
Slider Events
On its own, the slider controls can send three notification messages:
The NM_OUTOFMEMORY message is sent when the slider has run out of memory and could not complete a task
The NM_RELEASECAPTURE message is sent when the user releases the mouse on the slider
The NM_CUSTOMDRAW message is used if you want to draw something on the slider or you want to customize the appearance of the slider beyond what Visual C++ proposes
For its functionality, the slider highly relies on its parent. When the user clicks the thumb or any part of the slider, which causes it to slide, a scroll event is fired. If the slider is horizontal, the CWnd::OnHScroll() event is sent. If the slider is vertical, the CWnd::OnVScroll() event is sent.
Change the OnPaint() event of the dialog class as follows:
void CCarInventoryDlg::OnPaint()
{
int CurPos = m_CarSlider.GetPos() - 1;
CBitmap Bmp;
Bmp.LoadBitmap(CarPicture[CurPos]);
m_Picture.SetBitmap(Bmp);
UpdateData(FALSE);
. . .
}
Using either the ClassWizard (MSVC 6) or the Messages button , for the dialog, generate the WM_HSCROLL message and implement it as follows:
vvoid CCarInventoryDlg::OnHScroll(UINT nSBCode, UINT nPos, CScrollBar* pScrollBar)
{
// TODO: Add your message handler code here and/or call default
CRect RectPicture;
// Get the location and dimensions of the picture area
m_Preview.GetWindowRect(&RectPicture);
// Convert the current coordinates from the monitor (Screen) to the dialog box (Client)
ScreenToClient(&RectPicture);
// Repaint the picture area
InvalidateRect(&RectPicture);
CDialog::OnHScroll(nSBCode, nPos, pScrollBar);
}
Test the application
Return to MSVC
