Click here to Skip to main content
15,844,498 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi i need to create a scrollable slider with numbers displaying over it. I had attached the link for sample slider i needed.[^]
Updated 24-Oct-12 9:36am

1 solution

Preparing a custom scroll bar is not much easy. This link will help to prepare a custom scroll bar. It explains the handling of mouse messages, drawing of the control, keyboard interaction and proportional thumb slider.

I suppose the following steps are required to prepare a control, similar to your attached image.
1) Draw a gradient background.
2) Background of text values; Need to consider the transition from black(325) > gray(450) > black(600).
3) Need to draw the text in different gradient.
Regarding color of each text, Need to increase the intensity of each component(R,G,B) from Left to Center.
ie value 325 will be drawn with RGB(50,50,50) then color of 350 is slightly increased, say RGB(75,75,75) like that color of next values are incremented and 450 will be drawn by color RGB(255,255,255).
From 450 to 600, you have to decrease the intensity of each component(R,G,B).
4) Draw thumb slider, You have to apply transparency for the thumb slider. AlphaBlend() will be helpful to create a transparent effect of thumbnail over the background values.
You can ignore the drawing of left and right scroll arrows..
Share this answer

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

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900