Click here to Skip to main content
15,116,654 members
Articles / Desktop Programming / MFC
Posted 3 Jan 2012

Tagged as


16 bookmarked

An Adobe style slider control

Rate me:
Please Sign up or sign in to vote.
4.78/5 (5 votes)
3 Jan 2012CPOL2 min read
Customize the standard slider control to appear like an Adobe style slider control



This article is about customizing the Windows standard slider control through Custom Drawing fuctionalities provided by Windows itself. Although, here a Adobe photoshop style slider control is drawn, but it is upto the user to follow the guideline and come up with a nice slider control with custom looks.


In one of my projects I was asked to provide a control which looks like the adobe section cut control, but have all the APIs and features of a slider. Therefore I just handled the NM_CUSTOMDRAW Reflection message of the slider and came up with this nice looking (though i do say so myself) slider. 

Using the code

Place a slider control in your Dialog from resource, add a member variable for the slider through the MFC Wizard and change the classname to CAdobeSliderCtrl so that it would look similar to this in your header file of the parent dialog. 

CAdobeSliderCtrl m_adobeSliderCtrl; 

Guess what, you are finished. Now your slider should look like the one you see in the image on top.

Points of Interest

void CCustomDrawSliderCtrl::OnCustomDraw ( NMHDR* pNMHDR, LRESULT* pResult)

	UINT drawStage = nmcd.dwDrawStage;
	UINT itemSpec = (UINT)nmcd.dwItemSpec;
	switch ( drawStage )
			// most important of the drawing stages must return CDRF_NOTIFYITEMDRAW or else we will not get further 
			// NM_CUSTOMDRAW notifications for this drawing cycle we also return CDRF_NOTIFYPOSTPAINT 
			// so that we will get post-paint notifications		

		case CDDS_PREERASE:		// Before the erase cycle begins
		case CDDS_POSTERASE:	// After the erase cycle is complete
		case CDDS_ITEMPREERASE:	// Before an item is erased
		case CDDS_ITEMPOSTERASE:	// After an item has been erased
			*pResult = CDRF_DODEFAULT;

			switch (itemSpec)
				case TBCD_CHANNEL:					
					*pResult = CDRF_SKIPDEFAULT;					

				case TBCD_TICS:					
					*pResult = CDRF_DODEFAULT;

				case TBCD_THUMB:
					CDC* pDC = CDC::FromHandle( nmcd.hdc );
					Draw(pDC, &nmcd);

					*pResult = CDRF_SKIPDEFAULT;

		case CDDS_ITEMPOSTPAINT:	// After an item has been drawn
			switch ( itemSpec )
				case TBCD_TICS:					
					*pResult = CDRF_DODEFAULT;

				case TBCD_THUMB:
					*pResult = CDRF_DODEFAULT;	


I would like to attract the reader's attention to the code pasted above.

See how the the item prepaints and post paints are handled and the place where Draw is invoked. This is not standard coding when it comes to the slider, but this is a trick to easily achieve any type of drawing overriding for the slider.

And to address the nonstandard invokation of drawing of the whole slider control from inside drawing the thumb, the Draw function has a minor hack as you can see below nicely pointed out in the code comments:

void CCustomDrawSliderCtrl::Draw(CDC *pDC, LPNMCUSTOMDRAW lpcd)
	CRect rc;
	// The first drawing is to make sure the thumb area is painted properly with the background
	// and the edges
	OnDraw(pDC, rc);	

	// The next drawing is to make sure the control is drawn properly covering the whole client area
	CClientDC dc(this);
	OnDraw(&dc, rc);	

I hope you can guess that the CCustomDrawSliderCtrl gives a base for complete owner drawing of the slider control which should be done by the derived controls in the OnDraw overridable method like it is done in the CAdobeSliderCtrl (inherited of-course from CCustomDrawSliderCtrl).

So, the purpose of this article is to provide a base for drawing the slider at your will. Of-course, apart from very few specific cases I personally wouldn't advise to change too much the drawing of the standard windows control unless absolutely required.


Article posted: 3rd January, 2012 (How about that.. begining the new year with an article :) !!)


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


About the Author

Mukit, Ataul
Technical Lead Kotha Technologies
Bangladesh Bangladesh
If you are not in - you are out !
- Chapter 1

Comments and Discussions

Suggestiongood Pin
ligang_yt@aliyun.com25-May-16 0:27
Memberligang_yt@aliyun.com25-May-16 0:27 
GeneralRe: good Pin
Mukit, Ataul26-May-16 12:15
MemberMukit, Ataul26-May-16 12:15 
It won't look good in vertical Smile | :)

GeneralMy vote of 5 Pin
Manoj Kumar Choubey26-Feb-12 21:52
professionalManoj Kumar Choubey26-Feb-12 21:52 
GeneralMy vote of 5 Pin
imei.name3-Jan-12 3:20
Memberimei.name3-Jan-12 3:20 
GeneralRe: My vote of 5 Pin
Mukit, Ataul27-Feb-12 19:33
MemberMukit, Ataul27-Feb-12 19:33 

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.